使用jQuery動(dòng)態(tài)設(shè)置單選框的選中效果
更新時(shí)間：2018年12月06日 09:17:02 作者：賀劉芳
這篇文章主要介紹了使用jQuery動(dòng)態(tài)設(shè)置單選框的選中效果,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、需要實(shí)現(xiàn)的效果
這里使用jQuery來實(shí)現(xiàn)。需要實(shí)現(xiàn)的效果如下：當(dāng)下拉條改變時(shí)，單選框選中的值隨之變化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>動(dòng)態(tài)設(shè)置單選框的選中</title>
<!--
作者：Harrison
時(shí)間：2018-12-05
描述：當(dāng)下拉條改變時(shí)，動(dòng)態(tài)的設(shè)置單選框的值
-->
</head>
<body>
<select id="sexSelect" style="width: 10%;">
<option value="1">男</option>
<option value="2">女</option>
</select>
男：<input type="radio" value="1" name="sex" id="sexRadio1" checked/>
女：<input type="radio" value="2" name="sex" id="sexRadio2"/>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
$("#sexSelect").change(function(){
//獲取選中的下拉條
var checkedOfSelect = $("#sexSelect").val();
//動(dòng)態(tài)設(shè)置單選框的選中
if(checkedOfSelect == 1){
$("#sexRadio1").prop("checked",true);
$("#sexRadio2").prop("checked",false);
}
if(checkedOfSelect == 2){
$("#sexRadio1").prop("checked",false);
$("#sexRadio2").prop("checked",true);
}
});
</script>
</html>
二、注意
•當(dāng)設(shè)置單選框的checked屬性時(shí)，要使用jQuery的prop()方法,不能夠使用jQuery的attr()方法，attr()只適合簡單html元素設(shè)置。
•jQuery的prop()方法，第二個(gè)參數(shù)為布爾值，不能設(shè)置成string類型:
正確：$("#sexRadio1").prop("checked",true);
錯(cuò)誤：$("#sexRadio1").prop("checked","true");
總結(jié)
以上所述是小編給大家介紹的使用jQuery動(dòng)態(tài)設(shè)置單選框的選中效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了jQuery的緩存機(jī)制淺析,并且模擬jQuery自己寫了一個(gè)簡單的緩存系統(tǒng)實(shí)例,需要的朋友可以參考下2014-06-06
jquery進(jìn)行數(shù)組遍歷如何跳出當(dāng)前的each循環(huán)
通過 jquery 的循環(huán)方法進(jìn)行數(shù)組遍歷，但是當(dāng)不符合條件時(shí)，怎么跳出當(dāng)前循環(huán)，解決方法如下,需要的朋友可以參考下2014-06-06
jQuery實(shí)戰(zhàn)之仿淘寶商城左側(cè)導(dǎo)航效果
網(wǎng)絡(luò)上很很多這種效果的JS寫法，但是還沒有看見用jQuery寫的，效果實(shí)現(xiàn)很簡單，確切的說是用jquery實(shí)現(xiàn)這個(gè)效果很簡單，這就是jquery的強(qiáng)大和魅力所在。2011-04-04
JQuery勾選指定name的復(fù)選框集合并顯示的方法
這篇文章主要介紹了JQuery勾選指定name的復(fù)選框集合并顯示的方法,涉及jQuery表單元素操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05
解決jQuery與其它js(Prototype)庫沖突的方法很簡單，就是使用jQuery的jQuery.noConflict()函數(shù)，以下小編就為大家介紹，需要的朋友可以參考下2013-07-07
jQuery.extend 與 jQuery.fn.extend的用法及區(qū)別實(shí)例分析
這篇文章主要介紹了jQuery.extend 與 jQuery.fn.extend的用法及區(qū)別,結(jié)合實(shí)例形式分析了jQuery.extend與jQuery.fn.extend的功能、使用方法及區(qū)別,需要的朋友可以參考下2018-07-07
基于JQuery實(shí)現(xiàn)CheckBox全選全不選
做項(xiàng)目時(shí)需要實(shí)現(xiàn)CheckBox的全選，我想用JQuery實(shí)現(xiàn)，從網(wǎng)上找了找，網(wǎng)上的確有很多例子，但都不能實(shí)現(xiàn)我想要的全部效果2011-06-06
這兩天突發(fā)奇想，結(jié)果就做了一個(gè)jQ的tip插件，形狀就像下面這樣。會(huì)隨title的多少改變大小的喲.2010-11-11
在網(wǎng)上經(jīng)常會(huì)看到一些很長的網(wǎng)頁會(huì)延遲加載其中的圖片，我認(rèn)為這是一種按需分配的做法，網(wǎng)頁只為那些想繼續(xù)瀏覽網(wǎng)頁的人加載后面的圖片，在不影響用戶體驗(yàn)的前提下，最大程度地減少服務(wù)器負(fù)擔(dān)和流量2012-06-06
下面小編就為大家?guī)硪黄猨Query 局部div刷新和全局刷新方法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10