<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); });