：具有多个类的无线电选择器

Question

我有这个 HTML 环境，我想一键设置为.prop('checked', false) 两类单选按钮class=IIlvl 和class=IIIlvl。由于相同的类也提供给相关输入，我想知道是否有一种干净的方法可以用一行代码来完成。

例如，这个$('.IIlvl, .IIIlvl').prop('checked', false); 有效，但我认为它不是很干净，因为它也将.prop() 发送到具有相同类的输入（即使没有显示错误，所以可能只是个人偏执）。

我认为正确的解决方案是这样的$('input:radio[class=IIlvl], input:radio[class=IIIlvl]').prop('checked', false);，但这不起作用，我不想将它分成两行代码来划分两个类。

有什么建议吗？

<div id="aNP_SubCatSelectDiv">
    <input type="radio" class="IIlvl" id="aNP_SubCatRadioSelect" name="aNP_SubCatRadio">
    <select class="IIlvl" id="aNP_SubCatSelect" name="aNP_SubCatSelect">
        <option value="null">- Sub category -</option>
    </select>
</div>
<div id="aNP_SubCatInputDiv">
    <input type="radio" class="IIlvl" id="aNP_SubCatRadioInput" name="aNP_SubCatRadio">
    <input type="text" class="IIlvl" id="aNP_SubCatInput" placeholder="New sub category">
</div>

<div class="aNP_FamCodeInputDiv" data-radio-id="aNP_FamCodeRadioSelect">
    <input type="radio" class="IIIlvl aNP_FamCodeRadio" id="aNP_FamCodeRadioSelect" name="aNP_FamCodeRadio" data-input-id="aNP_FamCodeSelect">
        <select class="IIIlvl" id="aNP_FamCodeSelect" name="aNP_FamCodeSelect">
            <option value="null">- Family code -</option>
        </select>
</div>
<div class="aNP_FamCodeInputDiv" data-radio-id="aNP_FamCodeRadioInput">
    <input type="radio" class="IIIlvl aNP_FamCodeRadio" id="aNP_FamCodeRadioInput" name="aNP_FamCodeRadio" data-input-id="aNP_FamCodeInput">
        <input type="text" class="IIIlvl" id="aNP_FamCodeInput" placeholder="New family code">
</div>

Answer 1

您需要做的就是指定元素类型：

$('input.IIlvl, input.IIIlvl').prop('checked', false);

正如@Satpal 所提到的 - 这将针对这些类的所有输入 - 更具体地说，只针对无线电输入：

$(':radio.IIlvl, :radio.IIIlvl').prop('checked', false);

Answer 2

你可以使用多个选择器

$(':radio.IIlvl, :radio.IIIlvl').prop('checked', false);

或者，您也可以使用.filter()进行实验

$('.IIlvl, .IIIlvl').filter(':radio').prop('checked', true);

$('.IIlvl, .IIIlvl').filter(':radio').prop('checked', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aNP_SubCatSelectDiv">
  <input type="radio" class="IIlvl" id="aNP_SubCatRadioSelect" name="aNP_SubCatRadio">
  <select class="IIlvl" id="aNP_SubCatSelect" name="aNP_SubCatSelect">
    <option value="null">- Sub category -</option>
  </select>
</div>
<div id="aNP_SubCatInputDiv">
  <input type="radio" class="IIlvl" id="aNP_SubCatRadioInput" name="aNP_SubCatRadio">
  <input type="text" class="IIlvl" id="aNP_SubCatInput" placeholder="New sub category">
</div>

<div class="aNP_FamCodeInputDiv" data-radio-id="aNP_FamCodeRadioSelect">
  <input type="radio" class="IIIlvl aNP_FamCodeRadio" id="aNP_FamCodeRadioSelect" name="aNP_FamCodeRadio" data-input-id="aNP_FamCodeSelect">
  <select class="IIIlvl" id="aNP_FamCodeSelect" name="aNP_FamCodeSelect">
    <option value="null">- Family code -</option>
  </select>
</div>
<div class="aNP_FamCodeInputDiv" data-radio-id="aNP_FamCodeRadioInput">
  <input type="radio" class="IIIlvl aNP_FamCodeRadio" id="aNP_FamCodeRadioInput" name="aNP_FamCodeRadio" data-input-id="aNP_FamCodeInput">
  <input type="text" class="IIIlvl" id="aNP_FamCodeInput" placeholder="New family code">
</div>

注意：$('input') 也会选择checkboxes，所以最好使用:radio

Answer 3

您可以将输入类型添加到您的选择器中，例如：

$('.IIlvl:radio, .IIIlvl:radio').prop('checked', false);

希望这会有所帮助。

$('.IIlvl:radio, .IIIlvl:radio').prop('checked', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aNP_SubCatSelectDiv">
  <input type="radio" class="IIlvl" id="aNP_SubCatRadioSelect" name="aNP_SubCatRadio">
  <select class="IIlvl" id="aNP_SubCatSelect" name="aNP_SubCatSelect">
    <option value="null">- Sub category -</option>
  </select>
</div>
<div id="aNP_SubCatInputDiv">
  <input type="radio" class="IIlvl" id="aNP_SubCatRadioInput" name="aNP_SubCatRadio">
  <input type="text" class="IIlvl" id="aNP_SubCatInput" placeholder="New sub category">
</div>

<div class="aNP_FamCodeInputDiv" data-radio-id="aNP_FamCodeRadioSelect">
  <input type="radio" class="IIIlvl aNP_FamCodeRadio" id="aNP_FamCodeRadioSelect" name="aNP_FamCodeRadio" data-input-id="aNP_FamCodeSelect">
  <select class="IIIlvl" id="aNP_FamCodeSelect" name="aNP_FamCodeSelect">
    <option value="null">- Family code -</option>
  </select>
</div>
<div class="aNP_FamCodeInputDiv" data-radio-id="aNP_FamCodeRadioInput">
  <input type="radio" class="IIIlvl aNP_FamCodeRadio" id="aNP_FamCodeRadioInput" name="aNP_FamCodeRadio" data-input-id="aNP_FamCodeInput">
  <input type="text" class="IIIlvl" id="aNP_FamCodeInput" placeholder="New family code">
</div>