在我的页面上,我有两个单选按钮用于是,两个用于否。 如果我在一个地方检查是,它会检查第二个是按钮,或者如果我检查没有第二个也不会检查,我该怎么办。
以下是我的代码:
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
我如何同时选择两个无线电?
答案 0 :(得分:1)
在同一个广播组中不能选中多个按钮。你需要给两组不同的名字。我使用了search_by_range_A
和search_by_range_B
。 ID也必须是unix。
要使其自动检查另一个按钮,请使用获取值的.change()
处理程序,然后选择具有相同值的另一个复选框并进行检查。
$(":radio").change(function() {
var value = $(this).val();
$(":radio[value=" + value + "]").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<input checked="checked" id="search_by_range_A_no" name="search_by_range_A" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_A_yes" name="search_by_range_A" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_B_no" name="search_by_range_B" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_B_yes" name="search_by_range_B" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
答案 1 :(得分:1)
再次...... 网页上每个元素的ID都应该是唯一的 !
改用类。
但是,仍然有可能实现这一目标。您需要在代码中更改的唯一内容是单选按钮的name
,因为所有具有相同名称的单选按钮都被假定为一个组,并且Web浏览器仅允许默认只选择其中一个,你无法控制它。
因此,请更改名称以将单选按钮重新组合为两个不同的组。
然后你可以这样做:
$("[id^='search_by_range']").change(function(){
$("[id='"+$(this).attr("id")+"']").prop("checked", "checked");
});
答案 2 :(得分:0)
您可以使用 javascript 解决此问题 在这里,我可以给你提示你怎么能做到!
$('#search_by_range_yes').attr('checked','checked');
$('#search_by_range_yes').addAttr('checked');
这有助于:)
谢谢
答案 3 :(得分:0)
在相同的组单选按钮中,您无法检查多个。我为此使用了两个不同的组。
找到以下代码:
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_range_second" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range_second" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
JS代码:
$(function() {
$(":radio").on("change", function() {
var val = $(this).val(), checked = this.checked;
var others = $(":radio[value='"+val+"']").not(this);
others.prop('checked', true);
});
});
您可以在此处找到工作演示:http://jsfiddle.net/26g5rxs6/
答案 4 :(得分:0)
1.i了解您的问题,因为所有单选按钮都有相同的名称。
2.Same name单选按钮有一个组,仅在该组中选择。
3.您可以将单选按钮分组1.按否搜索2.按范围搜索。我通过以下代码更新了您的代码。
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_no" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_no" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>