【JQuery】 CheckBox 各種用法 取值

筆記

此篇主要為【 CheckBox 】的運用【 取值 】【刪除 remove】【遍歷 each】等方法的筆記


1、取值
//獲取[單個]checkbox選中項目
$(“input:checkbox:checked”).val()

$(“input:[type=’checkbox’]:checked”).val();

$(“input:[name=’ck’]:checked”).val();

2、[第N個]或[依value值],設為選中值
//設置[第一個]checkbox 為選中值
$(‘input:checkbox:first’).attr(“checked”,’checked’);

$(‘input:checkbox’).eq(0).attr(“checked”,’true’);

//設置[最後一個]checkbox為選中值
$(‘input:radio:last’).attr(‘checked’, ‘checked’);

$(‘input:radio:last’).attr(‘checked’, ‘true’);

//根據索引值設置任意一個checkbox為選中值
$(‘input:checkbox).eq(索引值).attr(‘checked’, ‘true’);索引值=0,1,2….

$(‘input:radio’).slice(1,2).attr(‘checked’, ‘true’);

//選中多個checkbox同時選中[第1個和第2個]的checkbox
$(‘input:radio’).slice(0,2).attr(‘checked’,’true’);

//根據Value值設置checkbox為選中值
$(“input:checkbox[value=’1′]”).attr(‘checked’,’true’);

3、刪除[第N個]或[依value值]
//刪除Value=1的checkbox
$(“input:checkbox[value=’1′]”).remove();
//刪除第幾個checkbox
$(“input:checkbox”).eq(索引值).remove();索引值=0,1,2….
//如刪除第3個checkbox
$(“input:checkbox”).eq(2).remove();

4、[全部]取消、選取
//指定該項目的全部,取消勾選
$(“input[name=”+$(this).val()]”).prop(“checked”,false);
//此方法無效,不要使用↓
$(“input[name=”+$(this).val()+”Checkbox]”).attr(“checked”,false);
//指定該項目的全部,勾選
$(“input[name=”+$(this).val()]”).prop(“checked”,true);

5、遍歷checkbox
//遍歷
$(‘input:checkbox’).each(function() {
$(this).prop(“checked”, true);
});

$(‘input:checkbox’).each(function (index, domEle) {
//寫入代碼
});

//遍歷:獲取有勾選的
$(‘input[name=”ck”]:checked’).each(function () {
$(“#”+$(this).val()+”Div”).show();
});

//遍歷:獲取沒有勾選的
$(‘input[name=”ck”]:not(:checked)’).each(function () {
$(“input[name=”+$(this).val()).attr(“disabled”,false);
});

$(“input[name=’ck’]:not(#ck0)”).each(function(){
<%– 沒有被勾選的,全部選起來 –%>
$(this).prop(“checked”, true);
});

Related Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js