您的位置：首页 > Web前端 > JQuery

jquery 实现checkbox全选

2016-06-28 14:00 429 查看

<body>
<div><input type="checkbox" id="all"/>全选</div>
<input class="t" type="checkbox" value="aa"/>aa
<input class="t" type="checkbox" value="bb"/>bb
<input class="t" type="checkbox" value="cc"/>cc
<input class="t" type="checkbox" value="dd"/>dd
<input type="button" id="btn"  value="点击获取数据"/>
<input type="text" id="text" />
<input type="button" id="sel"  value="设置选中"/>
</body>

<script type="text/javascript">
//设置全选
$(document).ready(function(e){
$("#all").click(function(){
var ck=$(".t");
var xz=$(this)[0].checked;//获取全选的选中状态
ck.prop("checked",xz);
})
//获取value值
$("#btn").click(function(){
var ck=$(".t");
for(var i=0;i<ck.length;i++)
{
if(ck.eq(i).prop("checked")){//eq(i) 代表第几项的意思
alert(ck.eq(i).val());
}
}
})
//设置某项选中
$("#sel").click(function(){
var v = $("#text").val();//取文本框里的值
var ck = $(".t");   //找到checkbox
ck.prop("checked",false); //设置不被选中
for(var i=0;i<ck.length;i++)
{
if(ck.eq(i).val()==v)//判断文本框的值是否与checkbox的name值相同
{
ck.eq(i).prop("checked",true);//设置被选中
}
}
})
});
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航