0

我正在使用一个将表单元素隐藏在标签后面的 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 集成吗？

谢谢，

4

5 回答 5

0

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

我不知道你的 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/

于 2012-09-21T05:32:55.197 回答
0

试试这个代码

​</p> 

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

检查[小提琴]

于 2012-09-21T05:35:47.193 回答
0

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

快速演示

于 2012-09-21T05:44:27.913 回答
0

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();
于 2012-09-21T06:54:04.880 回答
0

这是一个纯 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>
于 2014-09-13T18:13:35.770 回答