使用复选框控制单选按钮
[英]Control Radio Buttons with a Checkbox
问题描述
我使用的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集成吗？
谢谢，
5 个解决方案
解决方案1
0 2012-09-21 05:32:55
如果我不能正确理解，请告诉我。
我不知道您的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
解决方案2
0 2012-09-21 05:35:47
试试这个代码
$(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]
解决方案3
0 已采纳 2012-09-21 05:44:27
您可以尝试一下，我假设您的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);
});
快速演示
解决方案4
0 2012-09-21 06:54:04
$(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
0 2014-09-13 18:13:35
这是一个纯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>
复选框来控制单选按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.