JavaScript 单选按钮

JavaScript radio buttons

本文关键字：单选按钮 JavaScript      更新时间：2023-09-26

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

例如，如果我在radio按钮上选择"是"，则必须自动选中另一个radio按钮。我尝试了一些脚本，但似乎不起作用。

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

提前感谢！

　　　　　　　 　　　　　>　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);
    }
});​

我不太确定您要实现的目标，但是通过使用"name"属性，这会自动发生...当您检查一个收音机时...其他具有相同名称的设置为未选中。

<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

项

除非你是平均复选框或多个选项集？

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/的工作示例

对于如下所示的 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);
});​

演示：http://jsfiddle.net/nKLMX/

使用 jquery：

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

http://jsfiddle.net/

我已经为此模拟了一个纯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>
相关文章：