zoukankan      html  css  js  c++  java
  • 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);
    	  });
    	  
    

      

  • 相关阅读:
    javascript 实现页面跳转,禁止返回上一页【转】
    mysql 根据多个不同字段进行分组,并统计总数,求和
    阻止移动端浏览器点击图片浏览行为的几种方法【转】
    iframe子父窗口相互操作方法或元素
    jquery 之ajax,get,post异步请求简单代码模版
    select默认选择后台转过来的option选项
    Font Awesome 最简单应用例子
    清空select标签中option选项的3种不同方式
    js将字符串转换成json的三种方式
    Js获取当前日期时间
  • 原文地址:https://www.cnblogs.com/lt123/p/7209495.html
Copyright © 2011-2022 走看看