Question

我被要求仅在选择某个组合的无线电时显示另一个无线电输入！这可能吗？（从这里借用脚本：http://jsfiddle.net/wdckktz7/）

HTML

var

脚本

<div><input type="radio" id="option 1" name="group1" value="A" /></div>
<div><input type="radio" id="option 2" name="group2" value="B" /></div>
<div><input type="radio" id="option 3" name="group3" value="C" /></div>
<div id="combined"><input type="radio" id="option 4" name="group4" value="D" /></div>
<!--When option 2 and option 3 are checked then option 4 is revealed-->

Answer 1

监听相关无线电输入的变化，并评估是否应显示附加无线电。

http://jsfiddle.net/rat15ba5/2/

$('[name=group1],[name=group2]').change(function() {
   var op = (
       $('[name=group1]:checked').val() == 'A' &&
       $('[name=group2]:checked').val() == '2'
   ) ? 'show' : 'hide';
   $('#a2')[op]();
});

Answer 2

是每次选择新的单选按钮时，您需要存储选择的单选按钮，并且需要检查所需的选择组合是否与您的选择历史相匹配。

您可以通过将每个按钮的ID推送到数组中来列出过去的选择。

Answer 3

您可能希望为确定的单选按钮指定一个通用名称＆amp; class，分别说name="group1"和.radio，这样你就可以轻松地选择它们并在它们上设置一个事件监听器，如下所示：

$('.radio').on('change', function() {
    var r = $('.radio');
    $('#combined')[(r[1].checked && r[2].checked ? 'show' : 'hide')]();
})
.change();

$('.radio').on('change', function() {
    var r = $('.radio');
    $('#combined')[(r[1].checked && r[2].checked ? 'show' : 'hide')]();
})
.change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="radio" id="option 1" class="radio" name="group1" value="A" /></div>
<div><input type="radio" id="option 2" class="radio" name="group2" value="B" /></div>
<div><input type="radio" id="option 3" class="radio" name="group3" value="C" /></div>
<div id="combined"><input type="radio" id="option 4" name="group4" value="D" /></div>
<!--When option 2 and option 3 are checked then option 4 is revealed-->

显示基于多个无线电选择的字段

3 个答案: