jQuery實(shí)現(xiàn)遍歷復(fù)選框的方法示例

更新時(shí)間：2017年03月06日 14:13:28 作者：翱翔天地

這篇文章主要介紹了jQuery實(shí)現(xiàn)遍歷復(fù)選框的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)表單復(fù)選框元素的遍歷與字符串操作相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)遍歷復(fù)選框的方法。分享給大家供大家參考，具體如下：

1、問(wèn)題背景：

這里有10個(gè)復(fù)選框，根據(jù)選擇的復(fù)選框獲取其值，并將其值用“——”連接，插入到div中

2、實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>遍歷復(fù)選框</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
    <script>
      $(document).ready(function(){
        $("#btn").click(function(){
          var str = "";
          $("input[name='ckb']").each(function(){
            if($(this).is(":checked"))
            {
              str += "——" + $(this).val();
            }
          });
          $("#txt").html(str);
        });
      });
    </script>
  </head>
  <body>
    <div>
      <input type="checkbox" name="ckb" value="1" />1
      <input type="checkbox" name="ckb" value="2" />2
      <input type="checkbox" name="ckb" value="3" />3
      <input type="checkbox" name="ckb" value="4" />4
      <input type="checkbox" name="ckb" value="5" />5
      <input type="checkbox" name="ckb" value="6" />6
      <input type="checkbox" name="ckb" value="7" />7
      <input type="checkbox" name="ckb" value="8" />8
      <input type="checkbox" name="ckb" value="9" />9
      <input type="checkbox" name="ckb" value="10" />10<br>
      <input type="button" id="btn" value="遍歷"/>
      <div id="txt"></div>
    </div>
  </body>
</html>

3、運(yùn)行效果圖：

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery text(),val(),html()方法區(qū)別總結(jié)
jquery text(),val(),html()方法區(qū)別總結(jié)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
jQuery動(dòng)態(tài)增減行的實(shí)例代碼解析(推薦)
這篇文章主要介紹了jQuery動(dòng)態(tài)增減行的實(shí)例代碼解析,本文圖文并茂給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-12-12
jquery mobile實(shí)現(xiàn)撥打電話功能的幾種方法
在做一個(gè)便民服務(wù)電話，用到移動(dòng)web中列出的電話，點(diǎn)擊需要實(shí)現(xiàn)調(diào)用通訊錄，撥打電話功能，有需要的朋友可以參考一下
2013-08-08
JQuery創(chuàng)建DOM節(jié)點(diǎn)的方法
這篇文章主要介紹了JQuery創(chuàng)建DOM節(jié)點(diǎn)的方法,實(shí)例分析了jQuery創(chuàng)建元素結(jié)點(diǎn)、文本結(jié)點(diǎn)、屬性結(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
基于jquery的點(diǎn)擊鏈接插入鏈接內(nèi)容的代碼
基于jquery的點(diǎn)擊鏈接插入鏈接內(nèi)容的代碼，感覺(jué)有bug，解決的朋友可以留言方便更多的朋友
2012-07-07
jquery通過(guò)ajax加載一段文本內(nèi)容的方法
這篇文章主要介紹了jquery通過(guò)ajax加載一段文本內(nèi)容的方法,是jQuery針對(duì)Ajax的靈活應(yīng)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
jQuery中:eq()選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:eq()選擇器用法,實(shí)例分析了:eq()選擇器的功能、定義及匹配指定索引值元素時(shí)的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery圖片預(yù)加載等比縮放實(shí)現(xiàn)代碼
jQuery圖片預(yù)加載等比縮放實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2011-10-10
jQuery 1.9移除了$.browser可以使用$.support來(lái)替代
這篇文章主要介紹jQuery 1.9 移除了 $.browser 的替代方法,需要的朋友可以參考下
2014-09-09
jqTransform form表單美化插件使用方法
jQtransForm jQuery表單美化修飾插件，附帶有PHP提交程序，當(dāng)然ASP/ASP/NET/JSP都是同理，這里主要是jQuery美化部分的實(shí)例，美化對(duì)象為文本框、密碼框、文本域、Select下拉框、按鈕等，有了這些示例，美化其它的表單元素應(yīng)該不是大問(wèn)題。
2012-07-07