checkbox问题

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了！

转载于:https://www.cnblogs.com/colorstory/archive/2012/08/21/2647292.html

checkbox问题相关推荐

点击文字可以选中相应的checkbox
点击文字可以选中相应的checkbox (2008-11-22 14:16:40) 转载▼ 标签: 杂谈分类: javascript 转载: 这是一个例子: <html> <hea ...
Android CheckBox 点击的时候没有效果
写了一个CheckBox 点击的时候没有效果感觉莫名其妙的,最后在xml 中设置了 android:clickable="true" 点击有效果了, 见鬼了.
Android CheckBox 修改选择框
效果图是否被选中打印效果图图 CheckBox 是多选框 ,选中之后可以再次点击取消操作. 在使用的时候注意padding 是相对于字体来的不是相对选择框下面第一个位置调整了使用了paddin ...
ASP.NET MVC3 在WebGrid中用CheckBox选中行
分三步走 1.保证你的webgrid包含在form中 @using (Html.BeginForm("Assign","Home")) { } 2.在webgr ...
ASP.NET DEMO 14: 如何在 GridView/DataGrid 模板列中使用自动回发的 CheckBox/DropDownList
有时候希望在 GridView 模板中使用自动回发的 CheckBox (autopostback=true) ,但是 CheckBox 没有 CommandName 属性,因此也就无法在 GridV ...
用js 判断datagrid 中的 checkbox 是否被选中
private void Page_Load(object sender, System.EventArgs e) { // 在此处放置用户代码以初始化页面 ...
CSS3重新定义input中呆若木鸡的默认复选框CheckBox和单选框Radio样式
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><style>/* ...
手把手教你如何扩展GridView之自带CheckBox
我们在使用GridView的时候,很多时候需要使用CheckBox列,比如批量删除,批量审批,但是每每都需要记住繁琐的实现方法.多麻烦呀!再次给GridView做个手术,让它自己就能产生CheckBo ...
自己开发开源jquery插件--给jquery.treeview加上checkbox
很多时候需要把树状的数据显示除来,比如分类,中国省份.城市信息,等,因此这方面的javascript插件也有很多.比如性能优异的jquery.treeview和国人开发的功能强大的zTree. 我最近 ...
【转帖】如何通过 javascript 访问 GridView/DataGrid 选中 CheckBox 行各列的值
功能需求 1, 单击 checkbox 返回当前行值 2, 外部按钮获取所有选择行的值实现说明参见主要代码,代码为自说明式. 原文地址:http://www.cnblogs.com/Jingl ...

checkbox问题

checkbox问题相关推荐

最新文章

热门文章