jQuery入门简单实现反选与全选

//html代码
<input type="checkbox" id= 'all' value="全选"> 选择全部 一键上路 <input type="button" value="反选" id= 'agnSel'> <div id="wrap_input_box" > <input type="checkbox">全选与反选$<br> <input type="checkbox">全选与反选$<br> <input type="checkbox">全选与反选$<br> <input type="checkbox">全选与反选$<br> <input type="checkbox">全选与反选$<br> <input type="checkbox">全选与反选$<br> <input type="checkbox">全选与反选$<br> <input type="checkbox">全选与反选$<br> <input type="checkbox">全选与反选$<br> <input type="checkbox">全选与反选$<br> </div>
 
// jquery代码
var oInput = $('#wrap_input_box>input[type=checkbox]') var btn = $("#all"); btn.click(function(){ if(this.checked){ for(var i = 0 ; i<oInput.length;i++){ oInput[i].checked = true; } }else{ for(var i = 0 ; i<oInput.length;i++){ oInput[i].checked = false; } } }) // jquery绑定函数的方式 实际上就是给他包含的每一个dom对象都绑定了此事件 oInput.click(function(){ var flag = true; oInput.each(function(){ //当前的是否没有被选中 如果每一个都选了 那么这个flag值 将会不会改变 if(!this.checked){ flag = false; } }); console.log(flag); if(flag){ btn.attr('checked',true); }else{ btn.attr('checked',false); } }) //反选 $('#agnSel').click(function(){ for(i=0;i<oInput.length;i++){ oInput[i].checked= oInput[i].checked? false:true; } })

猜你喜欢

转载自www.cnblogs.com/tandongcn/p/10681145.html