checkbox多选事件:
如下HTML代码:
<input type="checkbox" name="test" value="1">1 <input type="checkbox" name="test" value="2">2 <input type="checkbox" name="test" value="3">3 <input type="checkbox" name="test" value="4">4 <input type="checkbox" name="test" value="5">5 <button id="btn_send" >点击改变选中状态</button>
点击全选中:
$("#btn_send").click(function(){ $("[name:test]:checkbox").attr("checked",false); })
点击全部选中:
$("#btn_send").click(function(){ $("[name:test]:checkbox").attr("checked",false); })
反选:关键在于!$(this).attr("checked");即与当前选中的状态不同
$("#btn_send").click(function(){ $("[name:test]:checkbox").each(function(){ $(this).attr("checked",!$(this).attr("checked")); }) })
也可以直接取checkbox的属性this.checked来实现:
$("#btn_send").click(function(){ $("[name:test]:checked").each(function(){ this.checked = !this.checked; }) })
获取checkbox的值:
一、遍历选中的checkbox,获取值的字符串形式:
$("#btn_send").click(function(){ var str = ""; var value = $("[name:test]:checkbox:checked").each(function(){ str += $(this).val()+"\r\n"; }); //alert(str); });
在项目后台中,获得primary_value的值。
$("#btn_send").click(function(){ var str = ""; //都可以实现,以下写法 //var value = $("[pk=user_id]:checkbox:checked").each(function(){ //var value = $("[pk:user_id]:checkbox:checked").each(function(){ var value = $(":checkbox:checked").each(function(){ str += $(this).val(); }); $("#user_id").val(str);//将值填充到指定的位置 });
做全选与全部选的时候:
HTML:
<input type="checkbox" name="test" id="checkall_test">全选 <input type="checkbox" name="test" value="1">1 <input type="checkbox" name="test" value="2">2 <input type="checkbox" name="test" value="3">3 <input type="checkbox" name="test" value="4">4 <input type="checkbox" name="test" value="5">5 <button id="btn_send" >点击改变选中状态</button>
$("#checkall_test").click(function(){ if(this.checked){ $("[name=test]:checkbox").attr("checked",true); }else{ $("[name=test]:checkbox").attr("checked",false); } })
因为所有子多选框的状态和checkall_test的状态是一样的所以可以这样写:
$("#checkall_test").click(function(){ $("[name=test]:checkbox").attr("checked",this.checked); })
如果要实现全部选中的时候,checkall_test选中,如果有一个没选中则不选中checkall_test,如果都选中了自动选中checkall_test。实现如下:
$("[name=test]:checkbox").click(function(){ var flag = true; $("[name=test]:checkbox").each(function(){ if(!this.checked){ flag = false;//如果有没选中的,则不选中checkall_test } }); $("#checkall_test").attr("checked",flag); });
为什么在if中使用$(this).attr("checked",false) ??
梗住了,那是设置属性了,这样改:$(this).attr("checked") == false就OK了!