做一个基本的全选、反选和全不选的按钮选择实现
纯javascript的DOM实现
代码如下：
<body>
<input id="one" name="mycheck" type="checkbox" onclick="checkchose()">篮球
<input id="two" name="mycheck" type="checkbox" onclick="checkchose()">足球
<input id="three" name="mycheck" type="checkbox" onclick="checkchose()">排球
<input id="four" name="mycheck" type="checkbox" onclick="checkchose()">网球
<input id="five" name="mycheck" type="checkbox" onclick="checkchose()">乒乓球
<br />
<button id="allchose" onclick="allchose()">全选</button>
<button id="inverse" onclick=" inverse()" disabled>反选</button>
<button id="nochose" onclick="nochose()" disabled>全不选</button>
<script>
/*全选、反选、不选按钮实现*/
//全选
function allchose(){
var obj = document.getElementsByName("mycheck");
for(var i=0; i<obj.length; i++){
obj[i].checked = true;
}
document.getElementById("inverse").disabled = false;
document.getElementById("nochose").disabled = false;
}
//复选框只要有选中则解除反选和全不选按钮的锁定
function checkchose(){
var obj = document.getElementsByName("mycheck");
var count = obj.length;
var num = 0 ;
for(var i=0; i<count; i++){
if(obj[i].checked == true){
document.getElementById("inverse").disabled = false;
document.getElementById("nochose").disabled = false;
num++;
}
}
}
//全不选
function nochose(){
var obj = document.getElementsByName("mycheck");
for(var i=0; i<obj.length; i++){
obj[i].checked = false;
}
}
//反选
function inverse(){
var obj = document.getElementsByName("mycheck");
if(document.getElementById("allchose").disabled == false){
for(var i=0; i<obj.length; i++){
if(obj[i].checked == false){
obj[i].checked = true;
}else{
obj[i].checked = false;
}
}
}
}
</script>
</body>
---------------------------------------------------------------------------------------------------------------------------------
jQuery 函数库实现
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<title></title>
</head>
<body>
<input id="one" name="mycheck" type="checkbox" >篮球
<input id="two" name="mycheck" type="checkbox" >足球
<input id="three" name="mycheck" type="checkbox" >排球
<input id="four" name="mycheck" type="checkbox" >网球
<input id="five" name="mycheck" type="checkbox" >乒乓球
<br />
<button id="allchose" onclick="allchose()">全选</button>
<button id="inverse" onclick=" inverse()" >反选</button>
<button id="nochose" onclick="nochose()" >全不选</button>
<script>
/*全选、反选、不选按钮实现*/
//全选
function allchose(){
$("input[type='checkbox']").attr("checked", true);
}
//反选
function inverse(){
$.each($("input[type='checkbox']"),function(i){
this.checked = !this.checked;
});
}
//全不选
function nochose(){
$("input[type='checkbox']").attr("checked", false);
}
</script>
</body>
相关推荐
综上所述，使用 jQuery 实现全选、全不选、反选以及获取选中值的功能是相当直观和简单的。通过绑定事件处理器，我们可以轻松地响应用户的交互，动态地更新页面状态。结合 HTML 结构和适当的 CSS 样式，可以创建出...
JQuery实现全选、全不选、反选功能 1、当点击'全选'按钮时，页面中所有的复选框都应该为选中状态， 1.1、当再次点击'全选'按钮时，所有的复选框应该是非选中状态。 1.2、当点击子复选框时，'全选'按钮应该是非选中...
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
javaScript入门案例之复选框全选，全不选，反选
本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript（JS）实现复选框的全选、全不选和反选功能，这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...
JS实现全选反选全不选
本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
本文将详细讲解如何通过JS和jQuery实现checkbox的全选、反选以及全不选功能。 首先，我们需要理解HTML中的复选框元素`<input type="checkbox">`，它允许用户在一组选项中进行多选。为了实现全选、反选和全不选的...
此外，文件名称列表中的"全选"、"反选"和"全不选"可能是这个示例项目中的三个不同页面或文件，分别对应上述三种操作的实现示例。在实际开发中，这些文件可能会包含HTML、CSS和JavaScript代码，展示如何在网页上创建...
在这个例子中，我们有三个复选框，每个都有不同的值，并且我们添加了三个特殊的复选框用于控制全选、全不选和反选。 接下来，我们需要在JavaScript中定义相应的函数来处理这些操作。这些函数可以通过`onclick`事件...
使用Jquery编写的全选全不选反选功能，代码简洁，通俗易懂。。。
5. 实现不选：与全选相反，遍历所有checkbox，将每个checkbox的checked属性设置为false，实现不选效果。 6. 实现反选：反选的操作稍微复杂一些，需要判断每个checkbox的checked属性，如果是true则设置为false，如果...
在本教程中，我们将探讨如何利用C#实现复选框来控制DataGridView的数据全选、反选以及全不选，并在选中复选框后改变行的颜色。这将涉及到事件处理、数据绑定、自定义样式等多个方面。 首先，我们需要创建一个包含复...
在取复选框checkbox的属性checked属性值时，发现一个问题，就是当用attr取值时，真的为”checked”,假的为”undefined”;当用prop取值时，真的为”true”,假的为”false”。经过网上参考一些资料，及...全选、不选、
3. **全选和反选实现** - **全选Checkbox**：通常位于表格上方，当用户勾选此Checkbox时，所有行的Checkbox会被设置为选中状态。这可以通过监听全选Checkbox的`CheckedChanged`事件来实现，然后遍历DataGridView的...
总结来说，实现JS的全选、全不选和反选功能的关键在于理解DOM操作、事件监听以及属性的动态修改。通过这些基础概念，我们可以轻松地处理用户交互，提高网站或应用程序的用户体验。在实际开发中，这种功能广泛应用于...
C#的WinForm项目的dataGridView控件的CheckBox的全选、全不选、反选、单选、导出全部、仅导出已选择的项目到Excel的功能。简单明了，一看就懂。 我的腾讯微博：http://t.qq.com/djk8888
本代码是在众多的jQuery复选框功能代码中精选出来的，本人项目中使用的代码，这里分享给大家。 jQuery代码： 代码如下: $(function(){ $(“#checkedAll”).click(function(){ $(‘[name=items]:checkbox’)...
jquery实现全选和全不选，只要有一个复选框没有选中，全选框不选中；
Android ListView长按弹出CheckBox，实现全选，反选，批量删除功能. 详情：http://blog.csdn.net/u013006960/article/details/52102839