jQuery實現(xiàn)遍歷復(fù)選框的方法示例
更新時間：2017年03月06日 14:13:28 作者：翱翔天地
這篇文章主要介紹了jQuery實現(xiàn)遍歷復(fù)選框的方法,結(jié)合實例形式分析了jQuery針對表單復(fù)選框元素的遍歷與字符串操作相關(guān)技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)遍歷復(fù)選框的方法。分享給大家供大家參考，具體如下：
1、問題背景：
這里有10個復(fù)選框，根據(jù)選擇的復(fù)選框獲取其值，并將其值用“——”連接，插入到div中
2、實現(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、運行效果圖：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
- jquery獲取復(fù)選框被選中的值
- jquery判斷checkbox(復(fù)選框)是否被選中的代碼
- jquery操作復(fù)選框(checkbox)的12個小技巧總結(jié)
- jquery如何獲取復(fù)選框的值
- JQUERY復(fù)選框CHECKBOX全選,取消全選
- jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實現(xiàn)代碼
- jquery獲取復(fù)選框被選中的值
- Jquery獲取復(fù)選框被選中值的簡單方法
- jquery復(fù)選框CHECKBOX全選、反選
- jquery統(tǒng)計用戶選中的復(fù)選框的個數(shù)
- jquery實現(xiàn)勾選復(fù)選框觸發(fā)事件給input賦值
- jQuery遍歷頁面所有CheckBox查看是否被選中的方法
- Jquery遍歷checkbox獲取選中項value值的方法
- checkbox全選/取消全選以及checkbox遍歷jQuery實現(xiàn)代碼
相關(guān)文章
jquery text(),val(),html()方法區(qū)別總結(jié)
jquery text(),val(),html()方法區(qū)別總結(jié)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了jQuery動態(tài)增減行的實例代碼解析,本文圖文并茂給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
jquery mobile實現(xiàn)撥打電話功能的幾種方法
在做一個便民服務(wù)電話，用到移動web中列出的電話，點擊需要實現(xiàn)調(diào)用通訊錄，撥打電話功能，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了JQuery創(chuàng)建DOM節(jié)點的方法,實例分析了jQuery創(chuàng)建元素結(jié)點、文本結(jié)點、屬性結(jié)點的相關(guān)技巧,需要的朋友可以參考下2015-06-06
基于jquery的點擊鏈接插入鏈接內(nèi)容的代碼，感覺有bug，解決的朋友可以留言方便更多的朋友2012-07-07
這篇文章主要介紹了jquery通過ajax加載一段文本內(nèi)容的方法,是jQuery針對Ajax的靈活應(yīng)用,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery中:eq()選擇器用法,實例分析了:eq()選擇器的功能、定義及匹配指定索引值元素時的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery圖片預(yù)加載 等比縮放實現(xiàn)代碼
jQuery圖片預(yù)加載 等比縮放實現(xiàn)代碼，需要的朋友可以參考下。2011-10-10
jQuery 1.9移除了$.browser可以使用$.support來替代
這篇文章主要介紹jQuery 1.9 移除了 $.browser 的替代方法,需要的朋友可以參考下2014-09-09
jQtransForm jQuery表單美化修飾插件，附帶有PHP提交程序，當(dāng)然ASP/ASP/NET/JSP都是同理，這里主要是jQuery美化部分的實例，美化對象為文本框、密碼框、文本域、Select下拉框、按鈕等，有了這些示例，美化其它的表單元素應(yīng)該不是大問題。2012-07-07