使用复选框控制单选按钮答案

【问题标题】：Control Radio Buttons with a Checkbox使用复选框控制单选按钮
【发布时间】：2012-09-21 05:26:34
【问题描述】：

我正在使用将表单元素隐藏在标签后面的 CMS，由于某些系统怪癖，我不得不设置一个复选框来控制单选按钮，因此如果选中该复选框，则选中“是”单选按钮没有选择“否”。我还希望单选按钮默认选中“否”选项，但我无法控制单选按钮的代码行。

我发现了一些 Javascript 可以完成其中的一小部分，但我想将它集成到 jQuery 中，以便在勾选框时显示和隐藏内容。

这是我目前所拥有的：

$('#checkbox1').change(function() {
    $('#content1').toggle("slow");
});

我的 Javascript 是这样的：

function ticked(){
    var ischecked = document.getElementById("checkbox").checked;
    var collection = document.getElementById("hideradio").getElementsByTagName('INPUT');
    if(ischecked){collection[0].checked = true;}else{collection[0].checked = false;}
}

能否请您帮助编写一个 Javascript 版本，但要与我的 jQuery 集成？

谢谢，

【问题讨论】：

标签： javascript jquery forms

【解决方案1】：

你可以试试这个，我假设你的 html 是这样的。

<input type="checkbox" id="checkbox1" /> Check Box

<div id="content1" >
    Some Content <br />
    Some Content <br />
    Some Content <br />
    Some Content
</div>

<div id="hideradio">
    <input type="radio" name="rgroup" value="yes" /> Yes
    <input type="radio" name="rgroup" value="no" />  No
</div>

jQuery

$(function(){
     $('#hideradio input[type=radio][value=no]').attr('checked',true);
     $('#content1').hide();
});

$('#checkbox1').on('change', function() {
    $('#content1').toggle("slow");
    var self = this;
    if(self.checked)
        $('#hideradio input[type=radio][value=yes]').attr('checked',true);
    else
       $('#hideradio input[type=radio][value=no]').attr('checked',true);
});

快速DEMO

【讨论】：

这太棒了！有没有办法通过 jQuery 自动检查“否”？我使用的系统将标签伪装在它自己的通用标签后面，所以我没有选择默认选中的选项。
@Lee，检查更新的答案，在 dom 准备好时，隐藏内容并设置为 check=checked 没有收音机。

【解决方案2】：

试试这个代码

$(function(){
    $('#checkbox1').on('click' , function() {
        var isChecked = $(this).is(':checked');
        if(isChecked){
           $('#radio1').attr('checked' , true);
            $('#content1').toggle("slow");
        }
        else{
            $('#radio1').attr('checked' , false);
        }
    });
});

查看[FIDDLE]

【讨论】：

不幸的是没有用 - 我收到了这个错误 Uncaught SyntaxError: Unexpected token ILLEGAL
已更新代码.. 还要检查 fiddle 是否有工作演示

【解决方案3】：

如果我没有正确理解，请告诉我。

我不知道你的 HTML 代码，所以我提供一个

<form>
    <input type="checkbox" name="test_ck" id="test_ck" />
    <br/>
    <input type="radio" name="test_radio" id="test_radio" />
</form>

<div id="content"> A content !!! </div>

和javascript jquery

$(function(){
    $("#test_ck").on("change", function(){
           $("#test_radio").prop("checked", $(this).is(":checked"));               
        $("#content").toggle("slow");
    });
});

示例 -> jsfiddle

更新的 jsfiddle

http://jsfiddle.net/6wQxw/2/

【讨论】：

太棒了！如果未选中复选框并且页面自动加载，我只需要它自动转到第二个单选按钮“否”。这可能吗？

【解决方案4】：

jsfiddle

$(document).on('change', '#checkbox', function() { toggle(this); });

var toggle = function(obj) {
    var checked = $(obj || '#checkbox').is(':checked');
    $(':radio[value=no]').prop('checked', !checked);
    $(':radio[value=yes]').prop('checked', checked);
    $('#content').toggle(checked);
}

toggle();

【讨论】：

【解决方案5】：

这是一个纯JavaScript的解决方案，不需要使用jQuery：

<body>
<label for="a">Male</label>
<input type="radio" id="a">
<br/>
<label for="b">Female</label>
<input type="radio" id="b">
<script type="text/javascript">
    var nodes = document.querySelectorAll("input[type=radio]");// get elements
    var arr = Array.prototype.slice.call(nodes); // convert nodes to array for use in forEach
    arr.forEach(function(obj){
        obj.addEventListener("change",function(e){
            arr.forEach(function(obj){
                obj.checked = false;//make other radio false
            });
            this.checked = true;// make this radio ture
        });
    });
</script>
</body>

【讨论】：

请不要重复您的答案。您可以专门针对不同之处回答每个问题，也可以将问题标记为重复问题并只回答一次。