最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

jquery一键控制checkbox全选、反选或全不选

来源:动视网 责编:小采 时间:2020-11-27 22:27:49
文档

jquery一键控制checkbox全选、反选或全不选

jquery一键控制checkbox全选、反选或全不选:jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法。 Hml的checkbox没有加name,只用了 div 嵌套。 如有更好的方法,望指点。 //全选 $('#allChecked').change(function(){ $('#box').children('
推荐度:
导读jquery一键控制checkbox全选、反选或全不选:jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法。 Hml的checkbox没有加name,只用了 div 嵌套。 如有更好的方法,望指点。 //全选 $('#allChecked').change(function(){ $('#box').children('


jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法。

Hml的checkbox没有加name,只用了 div 嵌套。

如有更好的方法,望指点!!

//全选
$('#allChecked').change(function(){
 $('#box').children(':checkbox').prop('checked',$(this).is(':checked')?true:false);
});
//反选
$('#invertChecked').change(function(){
 if($(this).is(':checked')){
 $('#box').children(':checkbox').each(function(){
 $(this).prop('checked',$(this).is(':checked')?false:true);
 });
 }
});
//一键控制全选、反选、全不选
$('#orChecked').change(function(){
 if($(this).is(':checked')){
 var box = $('#box').children(':checkbox');
 if(box.length==box.filter(':not(:checked)').length){ // 复选框长度和没选中的个数一样 -> 全选 , .not(':checked').length 也可以。
 $('#box').children(':checkbox').prop('checked',true);
 }else{ // 如果有选中个数,-> 反选 
 $('#box').children(':checkbox').each(function(){ 
 $(this).prop('checked',$(this).is(':checked')?false:true);
 });
 }else{
 $('#box').children(':checkbox').prop('checked',false); // 如控制键取消选中,剩余的checkbox也取消选中
 }
 
});
 <div align="center">
 
 <div id="box">
 <input type="checkbox" value="1">西瓜
 <input type="checkbox" value="2">芒果
 <input type="checkbox" value="3">橙
 <input type="checkbox" value="4">山竹
 <input type="checkbox" value="5">草莓
 <input type="checkbox" value="6">火龙果
 </div> 
 
 <br>
 
 <input type="checkbox" id="allChecked">全选
 <input type="checkbox" id="invertChecked">反选
 <input type="checkbox" id="orChecked">全选/反选/全不选
 
 </div>

文档

jquery一键控制checkbox全选、反选或全不选

jquery一键控制checkbox全选、反选或全不选:jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法。 Hml的checkbox没有加name,只用了 div 嵌套。 如有更好的方法,望指点。 //全选 $('#allChecked').change(function(){ $('#box').children('
推荐度:
标签: 全选 复选框 反选
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top