87,986
社区成员
发帖
与我相关
我的任务
分享请帮忙看下jquery代码错误
我下面的jquery代码哪里有问题，为什么只有全不选按钮能正常使用，全选和反选都不行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script>
$(function(){
$('#btnq').click(function(){
$(':checkbox').attr('checked',true);
});
$('#btnqb').click(function(){
$(':checkbox').attr('checked',false);
});
$('#btnf').click(function(){
$(':checkbox[checked=true]').attr('checked',false);
$(':checkbox[checked=false]').attr('checked',true);
});
});
</script>
</head>
<body>
<input type="checkbox" name="chk" id="ck1" />1
<input type="checkbox" name="chk" id="ck2" />2
<input type="checkbox" name="chk" id="ck3" />3
<input type="checkbox" name="chk" id="ck4" />4
<input type="checkbox" name="chk" id="ck5" />5
<input type="button" value="全选" id="btnq" />
<input type="button" value="全不选" id="btnqb" />
<input type="button" value="反选" id="btnf" />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script>
$(function(){
$('#btnq').click(function(){
$(':checkbox').attr('checked',true);
});
$('#btnqb').click(function(){
$(':checkbox').attr('checked',false);
});
$('#btnf').click(function(){
$(':checkbox[checked=true]').attr('checked',false);
$(':checkbox[checked=false]').attr('checked',true);
});
});
</script>
</head>
<body>
<input type="checkbox" name="chk" id="ck1" />1
<input type="checkbox" name="chk" id="ck2" />2
<input type="checkbox" name="chk" id="ck3" />3
<input type="checkbox" name="chk" id="ck4" />4
<input type="checkbox" name="chk" id="ck5" />5
<input type="button" value="全选" id="btnq" />
<input type="button" value="全不选" id="btnqb" />
<input type="button" value="反选" id="btnf" />
</body>
</html>
...全文
请发表友善的回复…
发表回复
npk191954 2015-06-02
- 打赏
- 举报
attr()和prop()的使用场合，右边一栏是官方推荐使用的：
npk191954 2015-06-02
- 打赏
- 举报
input checkbox类型在jQuery中不允许你这样写，而是必须用prop。
“对于值是true/false的property，类似于input的checked attribute等，attribute取得值是HTML文档字面量值，property是取得计算结果，property改变不影响attribute字面量，但attribute改变会影响property计算”。
你在第一个响应函数里加一个alert测试，然后点击复选框打勾和点击复选框取消打勾，两种情况下分别点击”全选按钮“，”checked“字面量会是一样的：
$(function(){
$('#btnq').click(function(){
$('#ck1').attr("checked",true);
alert($('#ck1').attr("checked"));
});
天际的海浪 2015-06-02
- 打赏
- 举报
好的，谢谢！请问$(':checkbox[checked=true]')选择器这样写有问题吗，我选了两个复选框，然后用调试器调试，结果数组长度是0.[/quote]
$(':checkbox:checked')
tenhilltree 2015-06-02
- 打赏
- 举报
好的，谢谢！请问$(':checkbox[checked=true]')选择器这样写有问题吗，我选了两个复选框，然后用调试器调试，结果数组长度是0.
天际的海浪 2015-06-02
- 打赏
- 举报
1.6版本之后
attr()改为prop()
soton_dolphin 2015-06-02
- 打赏
- 举报
用prop 代替attr
$(function(){
$('#btnq').click(function(){
$(':checkbox').prop('checked',true);
});
$('#btnqb').click(function(){
$(':checkbox').prop('checked',false);
});
$('#btnf').click(function(){
$(':checkbox[checked=true]').prop('checked',false);
$(':checkbox[checked=false]').prop('checked',true);
});
});
Braska 2015-06-02
- 打赏
- 举报
其他的都没问题啊 我用的jquery1.8版本
tenhilltree 2015-06-02
- 打赏
- 举报
对，是这样，谢谢！
全选按钮的问题是什么呢，点第一次的时候有效果，然后再点就没效果
Braska 2015-06-02
- 打赏
- 举报
我IE 谷歌测了下 全不选没问题
反选出问题是
$(':checkbox[checked=true]').attr('checked',false) ; //执行完以后 所有选中变成未选中
$(':checkbox[checked=false]').attr('checked',true); //所有上面执行的未选中和之前的未选中的变成选中
所以不管做什么操作的结果都是全选
tenhilltree 2015-06-02
- 打赏
- 举报
我的jquery库文件也是从官网下载的，应该没问题啊
tenhilltree 2015-06-02
- 打赏
- 举报
这种方法我知道，帮忙看下我写的那种哪里有错误，而且只有”全部选”按钮正常有效果，其它两个按钮都不正常。在火狐和google都试了
tony4geek 2015-06-02
- 打赏
- 举报
反选 $(':checkbox').each(function(index, element) {
$(this).attr("checked", !$(this).attr("checked"));
});
风中的少年 2015-06-02
- 打赏
- 举报
<script>
$(function(){
$('#btnq').click(function(){
$(':checkbox').attr('checked','checked');
});
$('#btnqb').click(function(){
$(':checkbox').removeAttr('checked');
});
$('#btnf').click(function(){
//alert($(':checkbox[checked=true]').attr('checked'))
//$(':checkbox[checked=true]').attr('checked',false);
//$(':checkbox[checked=false]').attr('checked',true);
$(':checkbox').each(function(index, element) {
if($(this).attr('checked')=="checked"){
$(this).removeAttr('checked');
}else{
$(this).attr('checked','checked');
}
});
});
});
</script>
BillHu233 2015-06-02
- 打赏
- 举报
.checkbox 意思是class 是这个得全部选中
你可以给input加个class=“aaa” 这样就可以$(".aaa")获取全部的input对象了 ，然后在循环挨个attr（“Checked”，“checked”）
Braska 2015-06-02
- 打赏
- 举报
$('#btnf').click(function(){
$(':checkbox').each(function(){
$(this).attr('checked', !$(this).attr('checked'));
});
});
