jQuery操作checkbox核取方塊方法大全

antzone發表於2017-03-08

checkbox核取方塊是最為常用的表單元素,所以對於它的常用操作是必須要掌握的,下面就簡單列舉一下jQuery操作checkbox常用程式碼,希望能夠給需要的朋友帶來一定的幫助。

一.獲取單個選中checkbox核取方塊值:

實現此功能的方法有很多中,下面做一下列舉:

方法一:

[JavaScript] 純文字檢視 複製程式碼
$("input:checkbox:checked").val()

方法二:

[JavaScript] 純文字檢視 複製程式碼
$("input:[type='checkbox']:checked").val();

方法三:

[JavaScript] 純文字檢視 複製程式碼
$("input:[name='ck']:checked").val();

二.獲取多個選中的checkbox核取方塊值:

[JavaScript] 純文字檢視 複製程式碼
$('input:checkbox').each(function(){
  if($(this).attr('checked') ==true){
    alert($(this).val());
  }
})

三.設定第一個核取方塊被選中:

[JavaScript] 純文字檢視 複製程式碼
$('input:checkbox:first').attr("checked",'checked');

四.設定最後一個核取方塊被選中:

[JavaScript] 純文字檢視 複製程式碼
$('input:radio:last').attr('checked', 'checked');

五.根據索引設定核取方塊選中:

[JavaScript] 純文字檢視 複製程式碼
$("input:checkbox").eq(1).attr('checked','true');

六.根據value屬性值設定選中:

[JavaScript] 純文字檢視 複製程式碼
$("input:checkbox[value='螞蟻部落']").attr('checked','true');

七.刪除具有指定value屬性值的核取方塊:

[JavaScript] 純文字檢視 複製程式碼
$("input:checkbox[value='螞蟻部落'']").remove();

九.遍歷所有的核取方塊:

[JavaScript] 純文字檢視 複製程式碼
$('input:checkbox').each(function() {
  //寫入程式碼
})

十.將核取方塊全部選中:

[JavaScript] 純文字檢視 複製程式碼
$('input:checkbox').each(function() {
  $(this).attr('checked', true);
});

相關文章