欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

怎么用jquery来监听checkbox的选中事件? 进行选中 不选中 有大用 有大大用

shiping1 的头像

jquery checkbox 全选反选代码只能执行一遍,第二次就失败


$(".chooseall").click(function(){   也可以是   $(".chooseall").change(function(){ 

$(".chooseall").click(function(){

    if($(".chooseall").attr("checked") == "checked"){

$("input[name='checkbox1']").removeAttr("checked","checked");

       console.log(1);

    }else{

 $("input[name='checkbox1']").attr("checked","checked");

        console.log(2);

    }

});

上面的这个代码第一次点击和第二次点击,能实现全选和反选功能,但一遍之后就不再起作用,这是什么情况啊

 

除了第一个checkbox之外,其余的都是ajax动态生成的,跟这个有关系么?console.log每次点击的都能交替输出1和2,但就是中间的代码不能执行。

 
chhayu | 浏览 5936 次  2015-03-02 19:05
2015-03-02 19:41最佳答案
 

removeAttr参数只需要一个,removeAttr("checked")

不过建议替换成

1
2
3
4
5
6
7
8
9
$(".chooseall").click(function(){
    if($(".chooseall").prop("checked") == true){
        $("input[name='checkbox1']").prop("checked"true);
        console.log(1);
    }else{
        $("input[name='checkbox1']").prop("checked"false);
        console.log(2);
    }
});

或者更简洁的,

1
2
3
4
$(".chooseall").click(function(){
    var isChecked = $(this).prop("checked");
    $("input[name='checkbox1']").prop("checked", isChecked);
});

来自 http://zhidao.baidu.com/link?url=tHExBxvfjed8z5cy9GwC7eAkFAVyH8b5RtkRqLU_v3I_M00Wfl3BYowGscShV8DMtO_...




 

jquery checkbox checked 第一次有效果 第二次以后就不好用了

标签: jquerycheckboxchecked

 
 255人阅读 评论(0) 收藏 举报
 分类:

之前我是这样写的

 

[javascript] view plain copy
 
 print?
  1. <pre name="code" class="javascript">    var allIsChecked=$('#checkedAll').is(':checked');  

  2.     var checkboxes = $('input[name="checkbox"]');  

  3.     allIsChecked?checkboxes.attr('checked',true):checkboxes.attr('checked',false);  



 


第一次点的时候好用,但是第二次之后就不行了。

 

后来查资料改成下面这样就好用了

[javascript] view plain copy
 
 print?
  1. var allIsChecked=$('#checkedAll').is(':checked');  

  2. var checkboxes = $('input[name="checkbox"]');  

  3. allIsChecked?checkboxes.prop('checked',true):checkboxes.prop('checked',false);  


 

原因是jQuery自1.6.1开始增加了一个prop()方法,关于attr和prop的使用区别总结起来就是具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr(),具体见下表:

 



来自 http://blog.csdn.net/boylong12/article/details/46412669



jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54)
 
今天做了 显示和不显示密码的效果
遇到了一个小小的问题
 
1 $("#showPassword").attr("checked")
居然提示undefied 
查了资料后 才发现 需要改为
$("#showPassword").prop("checked")
 
2 是否被选中事件为
change事件
 

jquery判断checkbox是否选中及改变checkbox状态



本文转载自:http://www.wufangbo.com/jquery-pan-duan-checked/
jquery判断checked的三种方法:
.attr('checked'):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦
jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对

// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");

来自 
http://blog.csdn.net/limingchuan123456789/article/details/11499665


jquery判断checked的三种方法:
.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦
jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");

来自
http://blog.csdn.net/limingchuan123456789/article/details/11499665


jQuery操作CheckBox的方法(选中,取消,取值)详解
标签: jqueryinputfunctionbuttonjavascripthtml
 142917人阅读 评论(10) 收藏 举报
 分类:
[html] view plain copy
 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">     

  2. <HTML>     

  3.  <HEAD>     

  4.   <TITLE> New document.nbsp;</TITLE>     

  5.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     

  6.     <SCRIPT LANGUAGE="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>     

  7.   <SCRIPT LANGUAGE="javascript">     

  8.   <!--     

  9.    $("document.quot;).ready(function(){     

  10.          

  11.     $("#btn1").click(function(){     

  12.           

  13.     $("[name='checkbox']").attr("checked",'true');//全选     

  14.        

  15.     })     

  16.        $("#btn2").click(function(){     

  17.           

  18.     $("[name='checkbox']").removeAttr("checked");//取消全选     

  19.        

  20.     })     

  21.     $("#btn3").click(function(){     

  22.           

  23.     $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数     

  24.        

  25.     })     

  26.     $("#btn4").click(function(){     

  27.           

  28.     $("[name='checkbox']").each(function(){     

  29.           

  30.         

  31.      if($(this).attr("checked"))     

  32.    {     

  33.     $(this).removeAttr("checked");     

  34.          

  35.    }     

  36.    else    

  37.    {     

  38.     $(this).attr("checked",'true');     

  39.          

  40.    }     

  41.         

  42.     })     

  43.        

  44.     })     

  45.      $("#btn5").click(function(){     

  46.     var str="";     

  47.     $("[name='checkbox'][checked]").each(function(){     

  48.      str+=$(this).val()+""r"n";     

  49.    //alert($(this).val());     

  50.     })     

  51.    alert(str);     

  52.     })     

  53.    })     

  54.   //-->     

  55.   </SCRIPT>     

  56.        

  57.  </HEAD>     

  58.     

  59.  <BODY>     

  60.  <form name="form1" method="post" action="">     

  61.    <input type="button" id="btn1" value="全选">     

  62.    <input type="button" id="btn2" value="取消全选">     

  63.    <input type="button" id="btn3" value="选中所有奇数">     

  64.    <input type="button" id="btn4" value="反选">     

  65.    <input type="button" id="btn5" value="获得选中的所有值">     

  66.    <br>     

  67.    <input type="checkbox" name="checkbox" value="checkbox1">     

  68.    checkbox1     

  69.    <input type="checkbox" name="checkbox" value="checkbox2">     

  70.    checkbox2     

  71.    <input type="checkbox" name="checkbox" value="checkbox3">     

  72.    checkbox3     

  73.    <input type="checkbox" name="checkbox" value="checkbox4">     

  74.    checkbox4     

  75.    <input type="checkbox" name="checkbox" value="checkbox5">     

  76.    checkbox5     

  77.    <input type="checkbox" name="checkbox" value="checkbox6">     

  78.    checkbox6     

  79.    <input type="checkbox" name="checkbox" value="checkbox7">     

  80.    checkbox7     

  81.    <input type="checkbox" name="checkbox" value="checkbox8">     

  82.  checkbox8     

  83.  </form>     

 
来自  http://blog.csdn.net/hurryjiang/article/details/6910331






一组checkbox, 现在想改变其中任意一项的选中状态都弹出一个对话框,   
  $("#kind input").each(function(index){
        $(this).click(function(){
          kind = $('input[@name=radiokind][@checked]').val();        
         } );   
 });            
$("#cz input").each(function(index){    
    $(this).click(function() {
         alert('123');         
     } );    
}); 
第一个是一组单选按钮可以实现.第二个是checkbox无效果.

网友采纳
 
$("#cz :checkbox").click(function(){
	alert($(this).val());
});

来自 http://zhidao.baidu.com/link?url=8d-fQcbi1Uvn63jMe21Ix8lO0eA40fDfGu8A1vzpP-crLH_zxzzJ26ESMMuTxbFGy2vktQRsRt0M4LsEHmcwGa

1、获取单个checkbox选中项(三种写法)

$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();

2、 获取多个checkbox选中项
$('input:checkbox').each(function() {
        if ($(this).attr('checked') ==true) {
                alert($(this).val());
        }
});

3、设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');

4、设置最后一个checkbox为选中值
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');

5、根据索引值设置任意一个checkbox为选中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');

6、选中多个checkbox同时选中第1个和第2个的checkbox
$('input:radio').slice(0,2).attr('checked','true');

7、根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');

8、删除Value=1的checkbox
$("input:checkbox[value='1']").remove();

9、删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();

10、遍历checkbox
$('input:checkbox').each(function (index, domEle) {
//写入代码
});

11、全部选中
$('input:checkbox').each(function() {
        $(this).attr('checked', true);
});

12、全部取消选择
$('input:checkbox').each(function () {
        $(this).attr('checked',false);
});


普通分类: