基于jQuery實(shí)現(xiàn)復(fù)選框的全選全不選反選功能

更新時(shí)間：2014年11月24日 14:49:52 投稿：hebedich

本文分享一段基于jQuery實(shí)現(xiàn)的復(fù)選框全選、全不選、反選功能的代碼，有需要的小伙伴直接帶走吧

本代碼是在眾多的jQuery復(fù)選框功能代碼中精選出來的，本人項(xiàng)目中使用的代碼，這里分享給大家。

jQuery代碼：

        $(function(){
            $("#checkedAll").click(function(){
                $('[name=items]:checkbox').attr('checked',true);
            });
            $("#checkedNo").click(function(){
                $('[name=items]:checkbox').attr('checked',false);
            });
            $("#checkedRev").click(function(){
                $('[name=items]:checkbox').each(function(){
                    //$(this).attr('checked',!$(this).attr('checked'));
                    this.checked = !this.checked;
                });
            });
            $("#send").click(function(){
               var str = "你選中的是：\r\n";
               $('[name=items]:checkbox:checked').each(function(){
                   str += $(this).val()+"\r\n";
               });
                alert(str);
            });
        });

HTML代碼：

復(fù)制代碼代碼如下:

    你愛好的運(yùn)動是？<br> 

    <input type="checkbox" name="items" value="足球"/>足球 

    <input type="checkbox" name="items" value="籃球"/>籃球 

    <input type="checkbox" name="items" value="羽毛球"/>羽毛球 

    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br> 

    <input type="button" id="checkedAll" value="全 選"/> 

    <input type="button" id="checkedNo" value="全不選"/> 

    <input type="button" id="checkedRev" value="反 選"/> 

    <input type="button" id="send" value="提 交"/>

小伙伴們使用起來是不是很方便，這也是本人千挑萬選出來的，希望能對大家有所幫助。

您可能感興趣的文章:

相關(guān)文章

在頁面加載完成后通過jquery給多個(gè)span賦值
想在頁面加載完成后，有幾個(gè)地方顯示當(dāng)前時(shí)間，所以想通過jquery給多個(gè)span賦值,需要的朋友可以參考下
2014-05-05
jquery+ajax實(shí)現(xiàn)異步上傳文件顯示進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了jquery+ajax實(shí)現(xiàn)異步上傳文件顯示進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
Jquery Change與bind事件代碼
在每一個(gè)匹配元素的change事件中綁定一個(gè)處理函數(shù)。change事件會在元素失去焦點(diǎn)的時(shí)候觸發(fā)，也會當(dāng)其值在獲得焦點(diǎn)后改變時(shí)觸發(fā)。
2011-09-09
用jquery獲取自定義的標(biāo)簽屬性的值簡單實(shí)例
下面小編就為大家?guī)硪黄胘query獲取自定義的標(biāo)簽屬性的值簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-09-09
js 實(shí)現(xiàn)一些跨瀏覽器的事件方法詳解及實(shí)例
這篇文章主要介紹了js 實(shí)現(xiàn)一些跨瀏覽器的事件方法詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下
2016-10-10
jQuery調(diào)用WebService的實(shí)現(xiàn)代碼
jQuery調(diào)用WebService的實(shí)現(xiàn)代碼,需要的朋友可以參考下。
2011-06-06
基于jQuery替換table中的內(nèi)容并顯示進(jìn)度條的代碼
這個(gè)例子使我更加明白呈現(xiàn)數(shù)據(jù)是前端工作滴一部分，如何使table中的數(shù)值變?yōu)榍逦貤l狀圖呢？聽我細(xì)細(xì)道來
2011-08-08
基于jQuery實(shí)現(xiàn)的打字機(jī)效果
本文主要分享了基于jQuery實(shí)現(xiàn)的打字機(jī)效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
jqGrid翻頁時(shí)數(shù)據(jù)選中丟失問題的解決辦法
我在項(xiàng)目中使用jqGrid時(shí)，采用異步加載服務(wù)器數(shù)據(jù)，例如點(diǎn)擊翻頁、搜索時(shí)都重新加載數(shù)據(jù)。這篇文章主要介紹了jqGrid翻頁時(shí)數(shù)據(jù)選中丟失問題,需要的朋友可以參考下
2017-02-02
jquery數(shù)組過濾篩選方法grep()簡介
這篇文章主要介紹了jquery數(shù)組過濾篩選方法grep()簡介,需要的朋友可以參考下
2014-06-06