jQuery获取选中的复选框或者单按钮的值

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了获取选中的复选框的值的功能。

当然对于单选按钮也是同样的道理,代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $("#bt").click(function(){
        var str="";
    var $input=$("div input").filter(":checked");
        $input.each(function(index,element){
      str=str+element.value+",";
    });
        $("#antzone").text(str);
  })
});
</script>
</head>
<body>
<input type="button" id="bt" value="查看效果"/>
<div id="box">
  <input type="checkbox"  value="email" name="spam" >E-Mail
  <input type="checkbox"  value="phone" name="spam">;Phone
  <input type="checkbox"  value="mail" name="spam">Computer
</div>
<div id="antzone"></div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(document).ready(function(){}),文档结构完全加载完毕再去执行函数中的代码。

(2).$("#bt").click(function(){}),为按钮注册click事件处理函数。

(3).var str="",声明一个空字符串,选中复选框的值就以字符串形式存储在此变量中。

(4).var $input=$("div input").filter(":checked"),获取选中的复选框的集合。

(5).$input.each(function(index,element){

  str=str+element.value+",";

}),将选中复选框的值连接成字符串。

(6).$("#antzone").text(str),将字符串写入div。

二.相关阅读:

(1).filter()可以参阅jQuery filter()一章节。

(2).each()可以参阅jQuery each()章节。

(3).text()可以参阅jQuery text()一章节。

jQuery获取选中的复选框或者单按钮的值,这样的场景在实际项目中还是用的比较多的,关于jQuery获取选中的复选框或者单按钮的值就介绍到这了。

jQuery获取选中的复选框或者单按钮的值属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容