JS 如何獲取radio選中后的值及不選擇取radio的值
更新時間:2013年10月28日 15:36:45 作者:
獲取radio選中后的值,這在提交頁面經(jīng)常會使用到的,在本文為大家介紹下不選擇也能獲取radio的值,具體實現(xiàn)如下,感興趣的朋友可以參考下
以下是網(wǎng)上摘下的文章(未測試但很規(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操作會把文本也當(dāng)做一個節(jié)點,所以會有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ù)選框或者單選框會使用label將其鏈接,比如:-->
<input id="radio1" type="radio" name="money" value="1" /><label for="radio1">美元</label>
以下要選擇的:
這個只判斷有沒有選擇
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("請選擇");
}
}
<input type="button" value="測試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操作會把文本也當(dāng)做一個節(jié)點,所以會有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ù)選框或者單選框會使用label將其鏈接,比如:-->
<input id="radio1" type="radio" name="money" value="1" /><label for="radio1">美元</label>
以下要選擇的:
這個只判斷有沒有選擇
復(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("請選擇");
}
}
<input type="button" value="測試radio中獲取數(shù)據(jù)" onclick="radioValue();"/>
您可能感興趣的文章:
- Js得到radiobuttonlist選中值的兩種方法(推薦)
- js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實現(xiàn)方法
- js獲取RadioButtonList的Value/Text及選中值等信息實現(xiàn)代碼
- javascript RadioButtonList獲取選中值
- js中獲取jsp表單中radio類型的值簡單實例
- JavaScript中獲取Radio被選中的值
- js獲取 type=radio 值的方法
- 用js的for循環(huán)獲取radio選中的值
- js 獲取radio按鈕值的實例
- 用 Javascript 驗證表單(form)中的單選(radio)值
- javascript radio值獲取代碼
- JavaScript獲取radio選中值的幾種常用方法小結(jié)
相關(guān)文章
ES6使用export和import實現(xiàn)模塊化的方法
這篇文章主要介紹了ES6使用export和import實現(xiàn)模塊化的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09總結(jié)JavaScript的正則與其他語言的不同之處
我接觸過不少語言,我很看重一門語言的正則表達式是否強大,還有正則與語法的結(jié)合是否緊密.在這一點上,JavaScript做的還不錯,至少有正則字面量.當(dāng)然,最強大的還是Perl.但最近發(fā)現(xiàn)JavaScript中的正則有幾個不同于其他語言的地方,下面一起來看下。2016-08-08H5如何實現(xiàn)喚起APP及調(diào)試bug解決
這篇文章主要為大家介紹了H5如何實現(xiàn)喚起APP及調(diào)試bug解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05