Question

我有一个div，只有在选中了两个单选按钮时才需要显示。目前，即使只选择了第二个单选按钮，也会显示。

<label>Salaried</label>
<input class="filter1" type="radio" name="occupation" value="salaried" />
<label>Self</label>
<input class="filter1" type="radio" name="occupation" value="self" />

<label>Singlelabel>
<input class="filter2" type="radio" name="status" value="single" />
<label>Married</label>
<input class="filter2" type="radio" name="status" value="married" />

<div style="display: none;">Show only when two radio buttons are selected</div>

我的jQuery代码在

之下

$(document).ready(function(){ 
  $("input[name=occupation]"&&"input[name=marital]").click(function () {
      if($(this).prop("checked")) {
        $('div').show();
      }
  });
});

Answer 1

首先选择器不正确。您需要将单独的选择器放在一个字符串中，但用逗号分隔它们。从那里你需要验证是否已经检查了两个无线电输入。您对this的使用仅检查最近更改的那个。另请注意，在处理收音机和复选框输入时，您应使用change事件，以便您的代码适用于使用键盘和鼠标进行导航的人员。

最后，在您的HTML示例中，第二个广播的名称为status而不是marital，但我认为在创建问题时这只是一个错误。

尽管如此，这应该适合你：

$(document).ready(function() { 
    $('input[name="occupation"], input[name="status"]').change(function () {
        if ($('input[name="occupation"]').prop('checked') && $('input[name="status"]').prop('checked')) {
            $('div').show();
        }
    });
});

另请注意，您可以为toggle()提供布尔值，以进一步缩短上述代码：

$(document).ready(function() { 
    $('input[name="occupation"], input[name="status"]').change(function () {
        $('div').toggle($('input[name="occupation"]').prop('checked') && $('input[name="status"]').prop('checked'));
    });
});

Answer 2

每次更改复选框时，请检查两者是否都已选中。

$('input[name="occupation"]').is(":checked") && $('input[name="status"]').is(":checked")

$(document).ready(function() {
  $('input[type="radio"]').on('change', function() {
    if ($('input[name="occupation"]').is(":checked") && $('input[name="status"]').is(":checked")) {
      $('div').show();
    } else {
      $('div').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Salaried</label>
<input class="filter1" type="radio" name="occupation" value="salaried" />
<label>Self</label>
<input class="filter1" type="radio" name="occupation" value="self" />

<label>Singlelabel
  <input class="filter2" type="radio" name="status" value="single" />
  <label>Married</label>
  <input class="filter2" type="radio" name="status" value="married" />

  <div style="display: none;">Show only when two radio buttons are selected</div>

Answer 3

https://jsfiddle.net/gqf2o2mm/5/

HTML

<label>Salaried</label>
<input class="filter1" type="radio" name="occupation" value="salaried" />
<label>Self</label>
<input class="filter1" type="radio" name="occupation" value="self" />
<label>Single</label>
<input class="filter2" type="radio" name="status" value="single" />
<label>Married</label>
<input class="filter2" type="radio" name="status" value="married" />
<div style="display: none;">Show only when two radio buttons are selected</div>

使用Javascript

$(document).ready(function() {
  $('input[name="occupation"], input[name="status"]').change(function() {
    if ($('input[name="occupation"]').is(':checked') && $('input[name="status"]').is(':checked')) {
      $('div').show();
    }
  });
});

Answer 4

我建议使用multiple selector选择两组单选按钮作为单个变量然后将change()侦听器绑定到该选择。

更改后，确定选中选项中的输入数量我正在使用filter()将选择限制为已检查的输入，并使用length来计算已过滤选择中的元素。

我存储一个布尔值（true或false）以指示检查输入的数量是否为2 此值可用于定义toggle()的行为（显示或隐藏）。

var $required_inputs = $('input[name="occupation"], input[name="status"]');

$required_inputs.on('change', function() {
  var two_selected = $required_inputs.filter(':checked').length == 2;
  $('#display').toggle(two_selected);
});

#display {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Salaried <input type="radio" name="occupation" value="salaried" /></label>
<label>Self <input type="radio" name="occupation" value="self" /></label>

<label>Single <input type="radio" name="status" value="single" /></label>
<label>Married <input type="radio" name="status" value="married" /></label>

<div id="display">Show only when two radio buttons are selected</div>

当使用jQuery选择两个单选按钮时，如何显示<div>？

4 个答案:

HTML