首頁  >  文章  >  web前端  >  jquery 實作checkbox全選,反選,全不選等功能碼(奇數)_jquery

jquery 實作checkbox全選,反選,全不選等功能碼(奇數)_jquery

WBOY
WBOY原創
2016-05-16 17:48:551175瀏覽

設頁有以下一組複選框和幾個相關按鈕(全選,反選,全不選等):

複製程式碼 代碼如下:

蘋果
橘子
香蕉
葡萄






則分別實現相關功能的完整程式碼如下:
複製程式碼 程式碼如下:

$(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(){//選取所有奇數
$("[name='fruit']:even").attr('checked','true') ;
})
$("#btn5").click(function(){//取得所有選取的選項的值
var checkVal='';
$("[name= 'fruit'][checked]").each(function(){
checkVal =$(this).val() ',';
})
alert(checkVal);
} )
});

注意使用jquery 之前必須要引入jquery 包哦!
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn