: 具有多个 class 的单选选择器

Question

我有这个 HTML 环境，我想在其中设置为 .prop('checked', false) 两个 class 单选按钮 class=IIlvl 和 class=IIIlvl 一键点击.由于相同的 class 也被赋予了相对输入，我想知道是否有一种干净的方法可以用一行代码来完成它。

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

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

有人有什么建议吗？

<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

您可以使用多个select或

$(':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') 也会 select checkboxes 所以最好使用 :radio

Answer 3

您可以将输入类型添加到您的选择器 luke :

$('.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>

: 具有多个 class 的单选选择器

:radio selector with multiple class

javascript

jquery

class

radio