• jquery checkbox设置选中,全选,反选,取值


        <form>
            你爱好的运动是?
            <input type="checkbox" name="check1" id="CheckAll"/>全选/全不选<br />
            <input type="checkbox" name="check2" id="opCheckAll"/>反选<br />
            <input type="checkbox" name="items" checked="checked" value="足球"/>足球
            <input type="checkbox" name="items" checked="checked" value="篮球"/>篮球
            <input type="checkbox" name="items" value="羽毛球"/>羽毛球
            <input type="checkbox" name="items" value="乒乓球"/>乒乓球
        </form>
        <input value="dianji" id="btn" type="button"/>
    

      

        ///////属性过滤选择器
    	  
    	  //获取 input标签type=checkbox的元素  第一种写法
    	   $("input[type=checkbox]").click(function(){
    	  	  alert($(this).attr("id"));
    	   });
    

      

    	//获取 input标签type=checkbox的元素  第二种写法(中间不能有空格)
    	  $(":input[type=checkbox]").click(function(){
    		  alert($(this).attr("id"));
    	 });
    	
    	//表单对象过滤器 :input=${"input"}
    		   :checkbox=${input[type=checkbox]}
    	           :radio=${input[type=radio]}


    //表单对象过滤器(:input :text :radio :checkbox :hidden)+属性过滤器
          获取 input标签type=checkbox的元素 第三种写法
           $(":checkbox[name=check2]").click(function(){
             alert($(this).attr("name"));
           });

      

    表单属性过滤器 :checked =$("input[checked=checked]")
    	 :selected=$("input[selected=selected]")
             alert($("form [checked=checked]").length);
    

      

      //全选
    	  $(":checkbox[name=check1]").click(function(){
    		  //设置 disabled,checked,selected这些属性时  一律用prop来替代 不用attr防止出错 
    		  $(":checkbox[name=items]").prop("checked",this.checked);  
    	  });
    

      

     //反选
    	 // $(":checkbox[name=check2]").click(function(){
    		 // $(":checkbox[name=items]").prop("checked",!$(this).attr("checked"));  这只是根据[name=check2]的checked属性来设置选中  错误
    	  //});
    	  //反选  遍历元素集合的每一个元素
    	  $(":checkbox[name=check2]").click(function(){
    		  $(":checkbox[name=items]").each(function(){
    			 //  $(this).prop("checked",!$(this).prop("checked"));  //第一种方法
    			 this.checked=!this.checked;//第二种方法   js
    			 
    		   });
    	  });
    

      

     //jquery  给一组checkbox添加事件  js添加一组元素事件很麻烦
    	  $(":checkbox[name=items]").click(function(){
    		  alert("123");
    	  });

          //获取每一个点击项的值
          $(":checkbox[name=items]").click(function(){
            alert($(this).val());
           });

      

      //获取选中项的值/设置选中项
    	  $("#btn").click(function(){
    		  //var s=$("[name=items]:checked").val();
    		  
    		 // 获取选中项的值
    		 // var s="";
    		  //$(":checked").each(function(){
    			//  s+=$(this).val();
    		 // });
    		  alert(s);
    	  });
    	  
    

      

  • 相关阅读:
    单元测试之mock使用
    Linux命令 diff 命令(比较文件的差异)
    @ComponentScan自动扫描组件介绍
    AES 加解密 & RSA加解密
    vxetable结合ElementUI单元格样式
    uniapp打开新的网页页签
    input等通过样式禁用
    elementui 时间选择限制当天之前的时间不可选择
    符号位扩展
    函数指针数组的运用
  • 原文地址:https://www.cnblogs.com/lt123/p/7209495.html
Copyright © 2020-2023  润新知