建站
咨询
售后
建站咨询
Jquery实现复选框全选与全不选
1、首先web项目结构如图所示，这个结构熟悉的话可以自己调整的。
创新互联从2013年成立，先为昌江等服务建站，昌江等地企业，进行企业商务咨询服务。为昌江企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
2、然后设置一些较为简单的选项框，这里随便用abcd来代替选项框了。
3、这里是jq来实现全选，所以引入jQuery，并且给按钮绑定一个jQuery类型的点击事件即可。
4、然后通过prop来设置input的属性即可设置全选了，prop是jq自带的一个方法。
5、因为CheckBox可以设置checked属性，所以我们把它设置为true即可。
6、最后预览，可以看到CheckBox都被checked中了，这样就达到全选了。
如何用jQuery实现checkbox全选
全选：
$(":checkbox").attr("checked","checked");
全不选：
$(":checkbox").removeAttr("checked");
反选：
$(":checkbox:checked").removeAttr("checked");
$(":checkbox:not(:checked)").attr("checked","checked");
全手写，没有经过测试。
完整代码如下，测试通过：
html
head
title如何用jQuery实现checkbox全选/title
script src="jquery-1.7.1.min.js"/script
script type="text/javascript"
//全选，全不选
function allSelect() {
if ($(":checkbox").attr("checked") != "checked") {
$(":checkbox").attr("checked", "checked");
}
else {
$(":checkbox").removeAttr("checked");
}
}
//反选
function otherSelect() {
$(":checkbox").each(function () {
if ($(this).attr("checked") == "checked") {
$(this).removeAttr("checked");
}
else {
$(this).attr("checked", "checked");
}
});
}
/script
/head
body
input id="Checkbox1" type="checkbox" /
input id="Checkbox2" type="checkbox" /
input id="Checkbox3" type="checkbox" /
input id="Checkbox4" type="checkbox" /
input id="Checkbox5" type="checkbox" /
input id="Button1" type="button" value="全选" onclick="allSelect();" /
input id="Button3" type="button" value="反选" onclick="otherSelect();" /
/body
/html
jquery 全选和取消只能执行一次 为什么呢？
是这样的，
jQuery中的attr方法会当做一个其实属性设置值的，
不会对原生的
checked设置值。
所以你要做的是使用原生的方法来让它全选和取消全选。
这个问题我之前遇到过。
怎么用jquery通过点击全选按钮实现全选？
HTML代码：
table
tr
tdinput type="checkbox" name="b"全选/tdtd内容/td
/tr
tr
tdinput type="checkbox" name="a"/tdtd复选1/td
/tr
tr
tdinput type="checkbox" name="a"/tdtd复选2/td
/tr
tr
tdinput type="checkbox" name="a"/tdtd复选3/td
/tr
tr
tdinput type="checkbox" name="a"/tdtd复选4/td
/tr
tr
tdinput type="checkbox" name="a"/tdtd复选5/td
/tr
tr
tdinput type="checkbox" name="a"/tdtd复选6/td
/table
JAVASCRIPT代码：
script
$("input[name='b']").click(function(){
//判断当前点击的复选框处于什么状态$(this).is(":checked") 返回的是布尔类型
if($(this).is(":checked")){
$("input[name='a']").prop("checked",true);
}else{
$("input[name='a']").prop("checked",false);
}
});
/script
3
这样就实现了全选和全不选。
jquery实现全选 我全选后，取消全选，再点击全选，却选不上。我手动选上，然后点击取消全选，能够取消。
你这样写太费劲，这样写好点：
$().ready(function(){
$("input['name='quanxuan'']").click(function(){
$("input:checkbox[name],#cb_all").attr('checked',$(this).attr('checked'));
});
});
纯手打，可能有字符上的错误。
你问题处在思路上，既然取消全选能生效那就证明你jq版本是支持attr属性的，那么就说下面的问题：
全选和取消全选，使用一个按钮就行，这也是通常都在使用的方法，因为多半人不愿意在全选的状态下再去找‘取消全选’的按钮来实现取消全选的效果。
实现这个效果只需要上述代码：单击全选多选框的时候选中全部多选框，再点就取消全选。
思路就是点击全选按钮的时候把所有的多选框都变成全选按钮的选择状态，反之亦然。
只要全选按钮也是多选框，第一下点，checked是true，这时触发进事件把所有多选框变true，再点全选按钮就变false，这时所有多选框也会边false，你要的效果就实现了。
（纯手打，给分啊~）
如何用jquery实现全选text里的文字
下面的jquery代码可以实现点击文本框即全选其文字的效果：
$("input:text").click(function(){
$(this).select();
});
示例代码如下
创建Html元素
div class="box"
span单击文本框全选文字：/spanbr
div class="content"
input type="text" value="单击即可全选文字"
/div
/div
简单设一下置css样式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
input[type='text']{width:200px;height:35px;padding:5px 10px;border:1px solid #ff9966;}
编写jquery代码
$(function(){
$(":text").click(function() {
$(this).select();
})
})
观察效果
初始状态
点击文本框之后
当前文章：jquery全选,jquery全选和全不选效果
网址分享：http://sczitong.cn/article/dscghcc.html
