Multipe單選按鈕組
[英]Multipe radio buttons groups
問題描述
我有這樣的形式：
<div id="div1">
<form>
<input type="radio" name="r1" id="r1" value="r1 value 1" />
<input type="radio" name="r1" id="r1" value="r1 value 2" />
<input type="radio" name="r1" id="r1" value="r1 value 3" />
<input type="radio" name="r2" id="r2" value="r2 value 1" />
<input type="radio" name="r2" id="r2" value="r2 value 2" />
<input type="radio" name="r2" id="r2" value="r2 value 3" />
<input type="radio" name="r3" id="r3" value="r3 value 1" />
<input type="radio" name="r3" id="r3" value="r3 value 2" />
<input type="radio" name="r3" id="r3" value="r3 value 3" />
</form>
</div>
單選按鈕組的數量是可更改的。
一旦最終用戶選擇某個組中的任何單選按鈕，如何取消選擇任何其他單選按鈕，因為當前如果我選擇r1值1然后選擇r3值3，則兩者都將被勾選。 一旦我在某個組中選擇一個單選按鈕，取消選擇我選擇的那個旁邊的所有其他組中的單選按鈕，我想要它。
非常感謝你提前。
4 個解決方案
解決方案1
1 2013-06-18 23:57:55
有沒有理由所有單選按鈕不能在同一組中？ 將它們放在相同的組名下是一個簡單的解決方法。 如果沒有，使用簡單的jQuery單擊處理程序取消選擇所有其他單選按鈕將起作用。
此外，您的示例中還有重復的ID。 不確定這是有意還是錯，但你也應該解決這個問題。
解決方案2
1 2013-06-19 00:05:19
這樣你就有了你的團隊。 但是一旦你選擇另一個無線電，它就會取消選擇任何其他無線電。 id's，名字改變了。
<div id="div1">
<form>
<div>Group 1
<input type="radio" name="r" id="g1r1" value="r1 value 1" />
<input type="radio" name="r" id="g1r2" value="r1 value 2" />
<input type="radio" name="r" id="g1r3" value="r1 value 3" />
</div>
<div>Group 2
<input type="radio" name="r" id="g2r1" value="r2 value 1" />
<input type="radio" name="r" id="g2r2" value="r2 value 2" />
<input type="radio" name="r" id="g2r3" value="r2 value 3" />
</div>
<div>Group 3
<input type="radio" name="r" id="g3r1" value="r3 value 1" />
<input type="radio" name="r" id="g3r2" value="r3 value 2" />
<input type="radio" name="r" id="g3r3" value="r3 value 3" />
</div>
</form>
</div>
解決方案3
1 2013-06-19 08:09:06
更改代碼，以便所有單選按鈕的name屬性相同。 並且您不能為多個元素使用相同的id。
解決方案4
0 已采納 2013-06-19 00:06:37
通過jQuery，你所要求的絕對是可能的。 這是確切的解決方案：
$('#div1 form input:radio').change(function() {
// Grabs all other radio buttons in the form, and
// deselects all but the one which was clicked on.
$('#div1 form input:radio').not(this).prop('checked', false);
});
此外，ID必須在任何HTML元素之間100％唯一。 雖然這不會阻止上述代碼工作，但如果您嘗試根據它的ID（例如$('#r1')選擇一個項目，則只返回其中一個元素，而不是全部。
要完整實施：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#div1 form input:radio').change(function() {
// Grabs all other radio buttons in the form, and
// deselects all but the one which was clicked on.
$('#div1 form input:radio').not(this).prop('checked', false);
});
});
</script>
<div id="div1">
<form>
<input type="radio" name="r1" id="r1" value="r1 value 1" />
<input type="radio" name="r1" id="r1" value="r1 value 2" />
<input type="radio" name="r1" id="r1" value="r1 value 3" />
<input type="radio" name="r2" id="r2" value="r2 value 1" />
<input type="radio" name="r2" id="r2" value="r2 value 2" />
<input type="radio" name="r2" id="r2" value="r2 value 3" />
<input type="radio" name="r3" id="r3" value="r3 value 1" />
<input type="radio" name="r3" id="r3" value="r3 value 2" />
<input type="radio" name="r3" id="r3" value="r3 value 3" />
</form>
</div>
</body>
</html>
對於IE 6,7和8的兼容性：
Replace:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
With:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
單選按鈕組包含復選框組
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.