快捷導(dǎo)航

jQuery操作CheckBox的方法介紹(選中,取消,取值)

更新時(shí)間：2014年02月04日 10:41:03 作者：

本篇文章主要是對jQuery操作CheckBox的方法(選中,取消,取值)進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
<HTML>   
 <HEAD>   
  <TITLE> New document．nbsp;</TITLE>   
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
    <SCRIPT LANGUAGE="javascript" src="http://www.cnjquery.com/demo/jquery.js"></script>   
  <SCRIPT LANGUAGE="javascript">   
  <!--   
   $("document．quot;).ready(function(){   

    $("#btn1").click(function(){   

    $("[name='checkbox']").attr("checked",'true');//全選   

    })   
       $("#btn2").click(function(){   

    $("[name='checkbox']").removeAttr("checked");//取消全選   

    })   
    $("#btn3").click(function(){   

    $("[name='checkbox']:even").attr("checked",'true');//選中所有奇數(shù)   

    })   
    $("#btn4").click(function(){   

    $("[name='checkbox']").each(function(){   

      
     if($(this).attr("checked"))   
   {   
    $(this).removeAttr("checked");   

   }   
   else  
   {   
    $(this).attr("checked",'true');   

   }   

    })   

    })   
     $("#btn5").click(function(){   
    var str="";   
    $("[name='checkbox'][checked]").each(function(){   
     str+=$(this).val()+""r"n";   
   //alert($(this).val());   
    })   
   alert(str);   
    })   
   })   
  //-->   
  </SCRIPT>   

 </HEAD>   

 <BODY>   
 <form name="form1" method="post" action="">   
   <input type="button" id="btn1" value="全選">   
   <input type="button" id="btn2" value="取消全選">   
   <input type="button" id="btn3" value="選中所有奇數(shù)">   
   <input type="button" id="btn4" value="反選">   
   <input type="button" id="btn5" value="獲得選中的所有值">   
   <br>   
   <input type="checkbox" name="checkbox" value="checkbox1">   
   checkbox1   
   <input type="checkbox" name="checkbox" value="checkbox2">   
   checkbox2   
   <input type="checkbox" name="checkbox" value="checkbox3">   
   checkbox3   
   <input type="checkbox" name="checkbox" value="checkbox4">   
   checkbox4   
   <input type="checkbox" name="checkbox" value="checkbox5">   
   checkbox5   
   <input type="checkbox" name="checkbox" value="checkbox6">   
   checkbox6   
   <input type="checkbox" name="checkbox" value="checkbox7">   
   checkbox7   
   <input type="checkbox" name="checkbox" value="checkbox8">   
 checkbox8   
 </form>   

您可能感興趣的文章:

相關(guān)文章

解決自定義$(id)的方法與jquery選擇器$沖突的問題
最近網(wǎng)站改版，原來的js都是原生js，因?yàn)楫?dāng)前比較jquery而且他的組件也比較多，使用方便，所以我們也采用了jquery但跟原來的$(id)沖突，經(jīng)過網(wǎng)絡(luò)很多人的推薦我們選擇了這個(gè)方法
2014-06-06
jquery實(shí)現(xiàn)移動(dòng)端懸浮拖拽框
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)移動(dòng)端懸浮拖拽框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
jQuery 刪除/替換DOM元素的幾種方式
在結(jié)果集后鏈?zhǔn)秸{(diào)用remove()方法即可刪除也可以通過向remove傳參的形式來過濾選擇結(jié)果再執(zhí)行remove操作
2014-05-05
jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果，大家無需輸入完全部郵箱信息，感興趣的小伙伴們可以參考一下
2015-11-11
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建菜單與按鈕
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，重點(diǎn)是EasyUI創(chuàng)建菜單與按鈕，按鈕分為鏈接按鈕、菜單按鈕、分割按鈕，對這方面感興趣的小伙伴們可以參考一下
2015-11-11
jQuery實(shí)現(xiàn)全選、反選和不選功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)全選、反選和不選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
form表單只提交數(shù)據(jù)而不進(jìn)行頁面跳轉(zhuǎn)的解決方案
將數(shù)據(jù)提交到saveReport（form的action指向）頁面，但是頁面又不進(jìn)行跳轉(zhuǎn)，即保持當(dāng)前頁面不變呢？利用jquery的ajaxSubmit函數(shù)以及form的onsubmit函數(shù)完成
2013-09-09
jQuery實(shí)現(xiàn)的超簡單輪播圖功能示例【代碼解釋】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的超簡單輪播圖功能,結(jié)合完整實(shí)例形式分析了基于jQuery實(shí)現(xiàn)的輪播圖相關(guān)功能實(shí)現(xiàn)、樣式設(shè)置與注意事項(xiàng),需要的朋友可以參考下
2023-05-05
jquery實(shí)現(xiàn)點(diǎn)擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊彈出帶標(biāo)題欄的彈出層(從右上角飛入)效果,涉及jQuery響應(yīng)鼠標(biāo)事件操作頁面元素動(dòng)畫效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-09-09
jQuery EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項(xiàng)卡的簡單實(shí)例
下面小編就為大家?guī)硪黄猨Query EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項(xiàng)卡的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10