JS 如何獲取radio選中后的值及不選擇取radio的值
更新時(shí)間:2013年10月28日 15:36:45 作者:
獲取radio選中后的值,這在提交頁面經(jīng)常會(huì)使用到的,在本文為大家介紹下不選擇也能獲取radio的值,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下
以下是網(wǎng)上摘下的文章(未測(cè)試但很規(guī)范可以模仿)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>text</title>
<script>
var chk = 0;
window.onload=function (){
var chkObjs = document.getElementsByName("radio");
for(var i=0;i<chkObjs.length;i++){
if(chkObjs[i].checked){
chk = i;
break;
}
}
}
function check_radio(){
var chkObjs = document.getElementsByName("radio");
for(var i=0;i<chkObjs.length;i++){
if(chkObjs[i].checked){
if(chk == i){
alert("radio值沒有改變不能提交");
break;
}
}
}
}
</script>
</head>
<body>
<form action='' method='post' onsubmit='javascript:return check_radio()'>
<input type='radio' value='1' name='radio' checked='checked'>一;
<input type='radio' value='2' name='radio'>二;
<input type='radio' value='3' name='radio'>三;
<input type='radio' value='4' name='radio'>四;
<input type='radio' value='5' name='radio'>五;
<input type=submit value=sub >
</form>
</body>
</html>
下面是不做選擇獲取radio的值
<input type="radio" name="money" value="1" />美元
<input type="radio" name="money" value="2" />日元
<input type="radio" name="money" value="3" />歐元
原生JS方式:(原生DOM操作會(huì)把文本也當(dāng)做一個(gè)節(jié)點(diǎn),所以會(huì)有nextSibling)
var 美元 = document.getElementsByName("money")[0].nextSibling.nodeValue;
var 日元 = document.getElementsByName("money")[1].nextSibling.nodeValue;
var 歐元 = document.getElementsByName("money")[2].nextSibling.nodeValue;
jQuery方式
$('input[name="money"]:checked').next('span').html();
<input type="radio" name="money" value="1" checked="checked" /><span>美元</span>
<input type="radio" name="money" value="2" /><span>日元</span>
<input type="radio" name="money" value="3" /><span>歐元</span>
<!--正常的情況下,創(chuàng)建復(fù)選框或者單選框會(huì)使用label將其鏈接,比如:-->
<input id="radio1" type="radio" name="money" value="1" /><label for="radio1">美元</label>
以下要選擇的:
這個(gè)只判斷有沒有選擇
function radioValue(){
var radArr = document.getElementsByName("radiov");
var radValue = "";
//alert(radArr.length);
for(var i=0; i<radArr.length; i++){
//alert(radArr[i].checked+" "+radArr[i].name + " "+ radArr[i].value);
if(radArr[i].checked){
radValue = radArr[i].value;
}
}
if(radValue != null && radValue != ""){
alert(radValue);
}else{
alert("請(qǐng)選擇");
}
}
<input type="button" value="測(cè)試radio中獲取數(shù)據(jù)" onclick="radioValue();"/>
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>text</title>
<script>
var chk = 0;
window.onload=function (){
var chkObjs = document.getElementsByName("radio");
for(var i=0;i<chkObjs.length;i++){
if(chkObjs[i].checked){
chk = i;
break;
}
}
}
function check_radio(){
var chkObjs = document.getElementsByName("radio");
for(var i=0;i<chkObjs.length;i++){
if(chkObjs[i].checked){
if(chk == i){
alert("radio值沒有改變不能提交");
break;
}
}
}
}
</script>
</head>
<body>
<form action='' method='post' onsubmit='javascript:return check_radio()'>
<input type='radio' value='1' name='radio' checked='checked'>一;
<input type='radio' value='2' name='radio'>二;
<input type='radio' value='3' name='radio'>三;
<input type='radio' value='4' name='radio'>四;
<input type='radio' value='5' name='radio'>五;
<input type=submit value=sub >
</form>
</body>
</html>
下面是不做選擇獲取radio的值
復(fù)制代碼 代碼如下:
<input type="radio" name="money" value="1" />美元
<input type="radio" name="money" value="2" />日元
<input type="radio" name="money" value="3" />歐元
原生JS方式:(原生DOM操作會(huì)把文本也當(dāng)做一個(gè)節(jié)點(diǎn),所以會(huì)有nextSibling)
復(fù)制代碼 代碼如下:
var 美元 = document.getElementsByName("money")[0].nextSibling.nodeValue;
var 日元 = document.getElementsByName("money")[1].nextSibling.nodeValue;
var 歐元 = document.getElementsByName("money")[2].nextSibling.nodeValue;
jQuery方式
復(fù)制代碼 代碼如下:
$('input[name="money"]:checked').next('span').html();
<input type="radio" name="money" value="1" checked="checked" /><span>美元</span>
<input type="radio" name="money" value="2" /><span>日元</span>
<input type="radio" name="money" value="3" /><span>歐元</span>
<!--正常的情況下,創(chuàng)建復(fù)選框或者單選框會(huì)使用label將其鏈接,比如:-->
<input id="radio1" type="radio" name="money" value="1" /><label for="radio1">美元</label>
以下要選擇的:
這個(gè)只判斷有沒有選擇
復(fù)制代碼 代碼如下:
function radioValue(){
var radArr = document.getElementsByName("radiov");
var radValue = "";
//alert(radArr.length);
for(var i=0; i<radArr.length; i++){
//alert(radArr[i].checked+" "+radArr[i].name + " "+ radArr[i].value);
if(radArr[i].checked){
radValue = radArr[i].value;
}
}
if(radValue != null && radValue != ""){
alert(radValue);
}else{
alert("請(qǐng)選擇");
}
}
<input type="button" value="測(cè)試radio中獲取數(shù)據(jù)" onclick="radioValue();"/>
您可能感興趣的文章:
- Js得到radiobuttonlist選中值的兩種方法(推薦)
- js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實(shí)現(xiàn)方法
- js獲取RadioButtonList的Value/Text及選中值等信息實(shí)現(xiàn)代碼
- javascript RadioButtonList獲取選中值
- js中獲取jsp表單中radio類型的值簡(jiǎn)單實(shí)例
- JavaScript中獲取Radio被選中的值
- js獲取 type=radio 值的方法
- 用js的for循環(huán)獲取radio選中的值
- js 獲取radio按鈕值的實(shí)例
- 用 Javascript 驗(yàn)證表單(form)中的單選(radio)值
- javascript radio值獲取代碼
- JavaScript獲取radio選中值的幾種常用方法小結(jié)
相關(guān)文章
HTML+JS實(shí)現(xiàn)3D倒計(jì)時(shí)爆炸特效
這篇文章主要為大家詳細(xì)介紹了如何結(jié)合HTML與JS實(shí)現(xiàn)3D倒計(jì)時(shí)爆炸特效,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2024-01-01ES6使用export和import實(shí)現(xiàn)模塊化的方法
這篇文章主要介紹了ES6使用export和import實(shí)現(xiàn)模塊化的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09總結(jié)JavaScript的正則與其他語言的不同之處
我接觸過不少語言,我很看重一門語言的正則表達(dá)式是否強(qiáng)大,還有正則與語法的結(jié)合是否緊密.在這一點(diǎn)上,JavaScript做的還不錯(cuò),至少有正則字面量.當(dāng)然,最強(qiáng)大的還是Perl.但最近發(fā)現(xiàn)JavaScript中的正則有幾個(gè)不同于其他語言的地方,下面一起來看下。2016-08-08H5如何實(shí)現(xiàn)喚起APP及調(diào)試bug解決
這篇文章主要為大家介紹了H5如何實(shí)現(xiàn)喚起APP及調(diào)試bug解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05