选择器,遍历,数组

  • jQuery的选择器中’ :checkbox’ 是查找所有复选框。

$("#fruit :checkbox");

遍历这个对象数组

  • jQeury的each函数:为每个匹配元素规定运行的函数。

  • each函数:: $(selector).each(function(index,element))

// 1.参数name的描述:
// 选中复选框的为true, 没选中为false
// 选中:
$("input[type='checkbox']").prop("checked"true);
// 没选中:
$("input[type='checkbox']").prop("checked"false);
 
// 2.参数perporties描述:
// 禁用页面上的所有复选框。
$("input[type='checkbox']").prop({disabled:true});
 
// 3.参数key,回调函数描述:
// 通过函数来设置所有页面上的复选框反选。
$("input[type='checkbox']").prop("checked",fucntion(i, val){
    return !val;
});



//    获取选中复选框的值  


			$(".btn").click(function(){
				var arr = new Array();
				$("#fruit :checkbox[checked]").each(function(i){
					arr[i] = $(this).val();
				});
				var vals = arr.join(",");
				console.log(vals);
			});

    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="utf-8" />  
            <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>  
            <title></title>  
        </head>  
        <body>  
            <input type="radio" name="type" value="0"/>类型0  
            <input type="radio" name="type" value="1"/>类型1  
            <input type="radio" name="type" value="2"/>类型2  
            <input type="radio" name="type" value="3"/>类型3  
            <br />  
            <input type="button" value="获取单选框的值" onclick="getRadio()"/>  
            <input type="button" value="为单选框赋值" onclick="setRadio()"/>  
            <br />  
            <input type="checkbox" name="status" value="0"/>状态0  
            <input type="checkbox" name="status" value="1"/>状态1  
            <input type="checkbox" name="status" value="2"/>状态2  
            <input type="checkbox" name="status" value="3"/>状态3  
            <br />  
            <input type="button" value="获取多选框的值" onclick="getCheckbox()"/>  
            <input type="button" value="为复选框赋值" onclick="setCheckbox()" />  
        </body>  
        <script>  
            function getRadio(){  
                var radioValue = $("input[name='type']:checked").val();  
                console.log(radioValue);  
            }  
            function setRadio(){  
                var i = 2;
                //$("input[name='type']").prop("checked",false);
                $("input[name='type'][value='"+i+"']").prop("checked",true);
                
            }  
            function getCheckbox(){  
                var checkboxValue = [];  
                $("input[name='status']:checked").each(function(){  
                    checkboxValue.push($(this).val());  
                });  
                console.log(checkboxValue);  
            }  
            function setCheckbox(){  
                var checkboxArray = [1,3];  
                $("input[name='status']").prop("checked",false); 
                $.each(checkboxArray,function(index,value){  
                    $("input[name='status'][value='"+value+"']").prop("checked",true);  
                });  
            }  
        </script>  
    </html>  
  1. 获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val()
// 或者
$("input:[type='checkbox']:checked").val();
// 或者
$("input:[name='ck']:checked").val();
  1. 获取多个checkbox选中项
$('input:checkbox').each(function() {
        if ($(this).attr('checked') ==true) {
                alert($(this).val());
        }
});
  1. 设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
// <!-- 或者 -->
$('input:checkbox').eq(0).attr("checked",'true');
  1. 设置最后一个checkbox为选中值
$('input:radio:last').attr('checked', 'checked');
// 或者
$('input:radio:last').attr('checked', 'true');
  1. 根据索引值设置任意一个checkbox为选中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
// 或者
$('input:radio').slice(1,2).attr('checked', 'true');
  1. 选中多个checkbox同时选中第1个和第2个的checkbox
$('input:radio').slice(0,2).attr('checked','true');
  1. 根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');
  1. 删除Value=1的checkbox
$("input:checkbox[value='1']").remove();
  1. 删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
// 如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
  1. 遍历checkbox
$('input:checkbox').each(function (index, domEle) {
//写入代码
});
  1. 全部选中
$('input:checkbox').each(function() {
        $(this).attr('checked', true);
});
  1. 全部取消选择
$('input:checkbox').each(function () {
        $(this).attr('checked',false);
});

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