<rt id="g7hq8"></rt>

jquery 實現(xiàn)checkbox全選，反選，全不選等功能代碼(奇數(shù))

2024-05-06 14:21:02

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

設(shè)頁面有如下一組復(fù)選框和幾個相關(guān)按鈕（全選，反選，全不選等）：
代碼如下:
<input type="checkbox" name="fruit" value="apple" />蘋果
<input type="checkbox" name="fruit" value="orange" />橘子
<input type="checkbox" name="fruit" value="banana" />香蕉
<input type="checkbox" name="fruit" value="grape" />葡萄
<input type="button" id="btn1" value="全選">
<input type="button" id="btn2" value="全不選">
<input type="button" id="btn3" value="反選">
<input type="button" id="btn4" value="選中所有奇數(shù)">
<input type="button" id="btn5" value="獲得選中的所有值">

則分別實現(xiàn)相關(guān)功能的完整代碼如下：
代碼如下:
$(function(){
$('#btn1').click(function(){//全選
$("[name='fruit']").attr('checked','true');
});
$('#btn2').click(function(){//全不選
$("[name='fruit']").removeAttr('checked');
});
$('#btn3').click(function(){//反選
$("[name='fruit']").each(function(){
if($(this).attr('checked')){
$(this).removeAttr('checked');
}else{
$(this).attr('checked','true');
}
})
});
$("#btn4").click(function(){//選中所有奇數(shù)
$("[name='fruit']:even").attr('checked','true');
})
$("#btn5").click(function(){//獲取所有選中的選項的值
var checkVal='';
$("[name='fruit'][checked]").each(function(){
checkVal+=$(this).val()+',';
})
alert(checkVal);
})
});

注意使用 jquery 之前必須要引入 jquery 包哦！

上一篇：js制作的鼠標懸浮時產(chǎn)生的下拉框效果

下一篇：jquery聚焦文本框與擴展文本框聚焦方法