jQuery 復選框 checkbox 取值和賦值

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

13.給 checked 賦值：

 $("#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");

 

示例：必須選則其中一個選項

<div class="right">
           <label>
              <input type="checkbox" value="1" name="love"/>
           </label>
           運動&nbsp;&nbsp;
           <label>
              <input type="checkbox" value="2" name="love"/>
           </label>
           聊天&nbsp;&nbsp;
           <label>
              <input type="checkbox" value="3" name="love"/>
           </label>
           玩游戲
</div>

<script>
$(function() {
         $("#submit").on("click", function() {var arr = []
            if($(":checkbox:checked").length == 0){
               alert("請選擇一項愛好");
               return false;
            }else{
               $.each($('input:checkbox:checked'),function(){
                  arr.push($(this).val())
               });
            }
            console.log(arr)
            alert('activityType:' + arr)
         })
})
</script>

 

示例：通過遍歷數組給checkbox賦默賦值

<div class="right">
           <label>
              <input type="checkbox" value="1" name="love"/>
           </label>
           運動&nbsp;&nbsp;
           <label>
              <input type="checkbox" value="2" name="love"/>
           </label>
           聊天&nbsp;&nbsp;
           <label>
              <input type="checkbox" value="3" name="love"/>
           </label>
           玩游戲
</div>

<script>
$(function() {
    var checklist = ['1', '3']
    if (checklist) {
       $.each(checklist, function(i,item){
          $("input[name='love'][value="+item+"]").attr("checked","checked");
       });
    }
})
</script>