Question

我正在使用隐藏标签背后的表单元素的CMS，因为一些系统怪癖我必须设置一个控制单选按钮的复选框，所以如果勾选复选框，则选择“是”单选按钮不是选择“否”。我还希望单选按钮默认选中“no”选项，但我无法控制单选按钮的代码行。

我发现了一些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集成吗？

谢谢，

Answer 1

如果我不理解，请告诉我。

我不知道你的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");
    });
});

示例 - ＆gt; jsfiddle

UPDATED jsfiddle

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

Answer 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]

Answer 3

你可以试试这个，我假设你的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

Answer 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();

Answer 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>

使用复选框控制单选按钮

5 个答案: