脚本宝典收集整理的这篇文章主要介绍了js實例教程-jquery 實現checkbox全選,反選,全不選等功能代碼(奇數),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小寶典致力於為廣大程序猿(媛)提供高品質的代碼服務,請大家多多光顧小站,小寶典在此謝過。
設頁面有如下一組複選框和幾個相關按鈕(全選,反選,全不選等):
代碼如下:
<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="選中所有奇數">
<input type="button" id="btn5" value="獲得選中的所有值">
. 代碼如下:
$(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);
})
});
設頁面有如下一組複選框和幾個相關按鈕(全選,反選,全不選等):
代碼如下:
<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="選中所有奇數">
<input type="button" id="btn5" value="獲得選中的所有值">
. 代碼如下:
$(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);
})
});
覺得可用,就經常來吧!Javascript技巧 腳本寶典 歡迎評論哦! js技巧,巧奪天工,精雕玉琢。小寶典獻醜了!
以上是脚本宝典为你收集整理的js實例教程-jquery 實現checkbox全選,反選,全不選等功能代碼(奇數)全部内容,希望文章能够帮你解决js實例教程-jquery 實現checkbox全選,反選,全不選等功能代碼(奇數)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。