jQuery簡單實現(xiàn)遍歷單選框的方法
更新時間：2017年03月06日 12:06:46 作者：翱翔天地
這篇文章主要介紹了jQuery簡單實現(xiàn)遍歷單選框的方法,涉及jQuery針對頁面表單元素的遍歷及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了jQuery簡單實現(xiàn)遍歷單選框的方法。分享給大家供大家參考，具體如下：
1、問題背景：
有四個單選框，分別為一年四季，現(xiàn)在需要判斷是否選中，如果選中這個單選框，就將其值賦值給輸入框
2、實現(xiàn)代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>遍歷單選框</title>
<script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
<style>
#result{
width: 200px;
}
</style>
<script>
$(document).ready(function(){
$("#season").click(function(){
var season = "";
$("input[name='rad']").each(function(i){
if($(this).is(":checked"))
{
season += "您選擇的是一年的第" + (i+1) + "季度：" + $(this).val();
}
});
$("#result").val(season);
});
});
</script>
</head>
<body>
<div>
<input type="radio" name="rad" id="spring" value="春季" />
<label for="spring">春季</label>
<input type="radio" name="rad" id="summer" value="夏季" />
<label for="summer">夏季</label>
<input type="radio" name="rad" id="autumn" value="秋季" />
<label for="autumn">秋季</label>
<input type="radio" name="rad" id="winter" value="冬季" />
<label for="winter">冬季</label><br>
<input type="text" id="result" /><br>
<input type="button" id="season" value="季節(jié)"/>
</div>
</body>
</html>
3、 實現(xiàn)效果圖：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
- js和jquery分別驗證單選框、復(fù)選框、下拉框
- JQuery判斷radio（單選框）是否選中和獲取選中值方法總結(jié)
- jquery單選框radio綁定click事件實現(xiàn)方法
- jQuery對下拉框,單選框,多選框的操作
- jquery對單選框,多選框,文本框等常見操作小結(jié)
- jquery操作下拉列表、文本框、復(fù)選框、單選框集合(收藏)
- Jquery為單選框checkbox綁定單擊click事件
- jquery 操作單選框，復(fù)選框，下拉列表實現(xiàn)代碼
- jQuery遍歷Form示例代碼
- jQuery插件form-validation-engine正則表達式操作示例
- jquery表單插件form使用方法詳解
- jQuery表單插件ajaxForm實例詳解
- jQuery Form表單取值的方法
相關(guān)文章
下面小編就為大家?guī)硪黄胘Query對無序列表排序的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
要實現(xiàn)這樣的一個功能復(fù)選框勾選時給input表單賦值，復(fù)選框取消時將表單值清除，需要的朋友可以參考下2014-05-05
jQuery html()方法使用不了無法顯示內(nèi)容的問題
jquery中的html方法使用不了，只能用完最基本的innerHTML把內(nèi)容展示出來2014-08-08
很多開發(fā)者都知道jQuery的.live()方法，他們大部分知道這個函數(shù)做什么，但是并不知道是怎么實現(xiàn)的，所以用的并不那么舒適。而且他們卻從未聽過還有解除綁定的.live()事件的.die()方法。即使你熟悉這些，但是你意識到.die()了嗎？2011-09-09
這篇文章主要為大家詳細介紹了JQuery實現(xiàn)Table的tr上移下移功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
圖片輪播是網(wǎng)站中的常用功能，用于在有限的網(wǎng)頁空間內(nèi)展示一組產(chǎn)品圖片或者照片，同時還有非常吸引人的動畫效果,本文向大家推薦12款實用的 jQuery 圖片輪播效果插件感興趣的朋友可以了解下哦2013-01-01
jQuery實現(xiàn)鼠標經(jīng)過圖片預(yù)覽大圖效果
我們可以借助jQuery來實現(xiàn)一些很酷炫的效果，本篇為大家介紹下通過jQuery實現(xiàn)當鼠標經(jīng)過了圖片數(shù)，圖片會放大進行預(yù)覽大圖,需要的朋友可以參考下2014-04-04
下面小編就為大家?guī)硪黄猨Query 常用代碼集錦(必看篇)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)照片墻自動播放特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了JQuery事件冒泡和默認行為代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05