2014-09-19 140 views
0

我正在嘗試這樣做。當我選擇單選按鈕,然後選擇所有單選按鈕。我只想要選擇一個單選按鈕

我有三個單選按鈕,它工作正常,當我使用單個div中的所有單選按鈕,但它不工作時,我將所有單選按鈕劃分在特定的div。我點擊它然後它被選中,但下一次,當我點擊它,然後仍單選按鈕被選中。 當我點擊它時應該取消選擇。

請幫忙。您的幫助將不勝感激。非常感謝。
這是我的代碼到目前爲止。

<html> 
<head> 
</head> 
<body> 
<div class="filter_subdivisions"> 
<div class="popular_city radio mgnb6 clearfix"> 
<span class="fltl" style="width:70%;padding-top: 6px;">Delhi Airport</span> 
<span class="fltr"> 
<label class="label_radio" for="radio-01"><input name="sample-radio" id="radio-01" value="1" type="radio" checked />&nbsp;</label> 
</span> 
</div> 
<div class="popular_city radio mgnb6 clearfix"> 
<span class="fltl" style="width:70%;padding-top: 6px;">Delhi Airport</span> 
<span class="fltr"> 
<label class="label_radio" for="radio-02"><input name="sample-radio" id="radio-02" value="1" type="radio" />&nbsp;</label> 
</span> 
</div> 
</div> 
</body> 
</html> 

<script> 
var d = document; 
var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false; 
var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); }; 
onload = function() { 
var body = gebtn(d,'body')[0]; 
body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js'; 

if (!d.getElementById || !d.createTextNode) return; 
var ls = gebtn(d,'label'); 
for (var i = 0; i < ls.length; i++) { 
var l = ls[i]; 
if (l.className.indexOf('label_') == -1) continue; 
var inp = gebtn(l,'input')[0]; 
if (l.className == 'label_radio') { 
l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off'; 
l.onclick = turn_radio; 
}; 
}; 
}; 
var turn_radio = function() { 
var inp = gebtn(this,'input')[0]; 
if (this.className == 'label_radio r_off' || inp.checked) { 
var ls = gebtn(this.parentNode,'label'); 
for (var i = 0; i < ls.length; i++) { 
var l = ls[i]; 
if (l.className.indexOf('label_radio') == -1) continue; 
l.className = 'label_radio r_off'; 
}; 
this.className = 'label_radio r_on'; 
if (safari) inp.click(); 
} else { 
this.className = 'label_radio r_off'; 
if (safari) inp.click(); 
}; 
}; 
</script> 
+0

變化的第二值一,值= 2,看看是否有幫助 – Gho 2014-09-19 07:55:37

+0

你一定要改善這個問題:你的問題是什麼?我在Chrome上測試了你的代碼,它的工作原理是:兩個不同div的單選按鈕,但名稱相同,彼此交替。 你想達到什麼目的? – MrAsterisco 2014-09-19 07:55:48

+0

你知道單選按鈕的工作原理嗎?任何一個單選按鈕將在同一時間被選中。如果希望切換功能,可以使用複選框。所以,首先要糾正/編輯你的問題。 – bharatpatel 2014-09-19 08:02:40

回答

0

你必須具有相同的容器內type="radio"按鈕以使它們表現得像單選按鈕,等作爲每W3Schools的示例

<form> 
<input type="radio" name="sex" value="male">Male<br> 
<input type="radio" name="sex" value="female">Female 
</form> 
+0

這是不正確的。請參閱上面的評論:它在Chrome中完美運行。 – MrAsterisco 2014-09-19 07:56:29