基于jquery實現(xiàn)復(fù)選框全選,反選,全不選等功能
jquery 實現(xiàn)全選,反選,全不選等功能,下面直接以例子進行說明。設(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 包哦!
以上就是小編辛苦整理的代碼,是不是用起來很方便,希望能夠幫到大家。
- jquery一鍵控制checkbox全選、反選或全不選
- jQuery對checkbox 復(fù)選框的全選全不選反選的操作
- jquery 實現(xiàn)checkbox全選,反選,全不選等功能代碼(奇數(shù))
- jquery實現(xiàn)全選、不選、反選的兩種方法
- jQuery實現(xiàn)全選、反選和不選功能
- 利用jQuery實現(xiàn)CheckBox全選/全不選/反選的簡單代碼
- JQuery選中checkbox方法代碼實例(全選、反選、全不選)
- jquery全選/全不選/反選另一種實現(xiàn)方法(配合原生js)
- 基于jQuery實現(xiàn)復(fù)選框的全選 全不選 反選功能
- jquery 全選、全不選、反選效果的實現(xiàn)代碼【推薦】
- jQuery實現(xiàn)全選、反選和不選功能的方法詳解
相關(guān)文章
JQuery統(tǒng)計input和textarea文字輸入數(shù)量(代碼分享)
本文主要介紹了jQuery實現(xiàn)統(tǒng)計輸入文字個數(shù)的方法,具有一定的參考價值,需要的朋友一起來看下吧2016-12-12jquery UI Datepicker時間控件的使用及問題解決
這篇文章主要介紹了jquery UI Datepicker時間控件的使用及與asp.net中的UpdatePanel聯(lián)合使用時的失效問題解決,感興趣的小伙伴們可以參考一下2016-04-04打造個性化的功能強大的Jquery虛擬鍵盤(VirtualKeyboard)
本文主要講訴了如何一起一步一步打造個性化的VirtualKeyboard:功能強大的Jquery虛擬鍵盤,非常的詳細,非常實用,有需要的朋友可以參考下2014-10-10Jqyery中同等與js中windows.onload的應(yīng)用
我們知道,在javascript中用來執(zhí)行頁面加載中的操作時候,我們會使用windows.onload=function(){}或者windows.onload=函數(shù)名(),也可以在body中調(diào)用onload事件調(diào)用方法即可,在jQuery中也有相當(dāng)?shù)拇a2011-05-05