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

您可以将输入类型添加到您的selctor中，如：

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

：多个类的无线电选择器

3 个答案: