Jquery操作复选框(CheckBox)的取值赋值实现代码

缺乏、安全感 2021-06-26 16:06 409阅读 0赞

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

--------------------

## `Jquery`通过遍历数组给`checkbox`赋默认值 ##

需求：有一个数组：(北京菜，粤菜)，`checkbox`如下：

现在想通过遍历这个数组，使数组里包含的值，在`checkbox`选中

代码：

var flavors = new Array([北京菜 , 粤菜]);
    
    $.each(flavors,function(i,item){ 
    
    $("input[name='checkboxFlavor'][value="+item+"]").attr("checked","checked");
    
    });

> 体会：选择器的`[]`可以有多重的选择条件

--------------------

## `jquery`实现勾选复选框触发事件给`input`赋值+回显复选框 ##

**js复选框**

$(function() { 
        var count = 0;
        $(".as1 :checkbox").click(function() { 
            var txtvalue = $(this).val();
            if ($(".txtValue").val() == "") { 
                if ($(this).prop("checked") == true) { 
                    var txtalso = $.trim(txtvalue);
                } else { 
                    var txtalso = "";
                }
            } else { 
    
                if ($(this).prop("checked") == true) { 
                    var txtalso = $.trim($(".txtValue").val()) + "," + $.trim(txtvalue);
                } else { 
    
                    var txtelse = $.trim($(".txtValue").val());
    
                    var txtnow = $.trim(txtvalue);
                    var reg1 = "," + txtnow;
                    var reg2 = txtnow + ",";
                    var reg3 = txtnow;
                    var txtelse = txtelse.replace(reg1, "").replace(reg2, "").replace(reg3, "");
                    var txtalso = txtelse;
                }
            }
            $(".txtValue").val(txtalso);
            count++;
        });
    });

**JS回显：**

$(function(){ 
        
        //当页面加载完成的时候，自动调用该方法
        window.onload=function(){ 
              //获得所要回显的值
             var checkeds = $("#qwer").val();
            //拆分为字符串数组
            var checkArray =checkeds.split(",");
             //获得所有的复选框对象
             var checkBoxAll = $("input[name='gdzc']");
             //获得所有复选框的value值，然后，用checkArray中的值和他们比较，如果有，则说明该复选框被选中
             for(var i=0;i<checkArray.length;i++){ 
                  //获取所有复选框对象的value属性，然后，用checkArray[i]和他们匹配，如果有，则说明他应被选中
               $.each(checkBoxAll,function(j,checkbox){ 
                     //获取复选框的value属性
                    var checkValue=$(checkbox).val();
                  if(checkArray[i]==checkValue){ 
                         $(checkbox).prop("checked",true);
                          }
                 })
             }
    
    }