JavaScript单选按钮

Question

我有几个radio按钮，当我选择其中一个按钮时，我还需要检查另一个按钮。

例如，如果我在radio按钮上选择是，则必须使用否自动检查另一个radio按钮。 我尝试了一些脚本，但似乎没有用。

有谁知道解决方案？我是JS的新手。

提前致谢！

Answer 1

　　　　　　　 　　　　　>　Live Demo　<　　　　 　　　　　　　 　

---

<!--HTML-->
<input type="radio" name="group_1" value="yes" id="r1">Yes<br>
<input type="radio" name="group_1" value="no" id="r2">No<br>
<br>
<input type="radio" name="group_2" value="yes" id="r3">Yes<br>
<input type="radio" name="group_2" value="no" id="r4">No<br>​

//Script
$("input[name='group_1']").click(function(){
    if(this.value=="yes"){
        $("input#r4").attr("checked",true);
    }else{
        $("input#r3").attr("checked",true);
    }
});
$("input[name='group_2']").click(function(){
    if(this.value=="yes"){
        $("input#r2").attr("checked",true);
    }else{
        $("input#r1").attr("checked",true);
    }
});​

Answer 2

我不太确定你想要实现什么，但是通过使用“name”属性，这会自动发生......当你检查一个无线电时...其他同名的设置被取消选中。< / p>

<input type="radio" name="someoption" value="0" />0 
<input type="radio" name="someoption" value="1" />1 
<input type="radio" name="someoption" value="2" />2 

检查上述任何一项将导致其他2未选中

除非您可能是复选框或多个选项集？

Answer 3

的javascript：

$('#myradio1').bind('change', function () {
  $('#myradio3').attr('checked', 'checked');
});    

HTML

<input type="radio" name="cols1" value="1" id="myradio1" />
<input type="radio" name="cols1" value="2" id="myradio2" />
<input type="radio" name="cols2" value="1" id="myradio3" />
<input type="radio" name="cols2" value="2" id="myradio4" />

请参阅http://jsfiddle.net/9jXbv/

上的工作示例

Answer 4

对于HTML标记，如下所示：

<div>
    <input type="radio" name="one" value="yes"> yes
    <input type="radio" name="one" value="no"> no
</div>

<div>
    <input type="radio" name="two" value="yes"> yes
    <input type="radio" name="two" value="no"> no
</div>

您可以使用此JavaScript代码：

$(":radio").on("change", function() {
    var that = this;
    $(":radio").filter(function() {
        return this.value == "no" && this.name != that.name;
    }).prop("checked", true);
});​

DEMO： http://jsfiddle.net/nKLMX/

Answer 5

使用jquery：

​$("#radio1").change(function() {
    $("#radio2").removeAttr("checked");
});​​​

http://jsfiddle.net/

Answer 6

我已经嘲笑了一个纯粹的JS解决方案（没有库）

<input type="radio" name="g1" value="1" />Yes
<br />
<input type="radio" name="g1" value="0" />No
<br /><br />
<input type="radio" name="g2" value="1" />Yes
<br />
<input type="radio" name="g2" value="0" />No

<script type="text/javascript">
    var g1 = document.getElementsByName('g1'); // store g1 elements
    var g2 = document.getElementsByName('g2'); // store g2 elements

    // handle click functionality
    function radio_checked_event(obj, f) {
        if(obj.addEventListener) {
            obj.addEventListener('click', f, false);
        } else if(obj.attachEvent) {
            obj.attachEvent('onclick', f);
        }
    }

    // when you click on g1 yes
    radio_checked_event(g1[0], function() {
            //set g1 no to checked
        g2[1].setAttribute('checked', 'checked');
    });
</script>