Search code examples
javascriptjqueryradio-button

:radio selector with multiple class


I have this HTML environment in which I want to set as .prop('checked', false) two classes of radio button class=IIlvl and class=IIIlvl with one click. Since the same class is given also to the relative inputs, I was wondering if there's a clean method to do it with one line of code.

For example, this $('.IIlvl, .IIIlvl').prop('checked', false); works but I think it's not really clean since it sends the .prop() also to the inputs with same class (even if no error is displayed, so maybe it's just a personal paranoia).

I think the proper solution is something like this $('input:radio[class=IIlvl], input:radio[class=IIIlvl]').prop('checked', false);, but this doesn't work and I don't want to split it in two lines of code dividing the two classes.

Has anyone any suggestion?

<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>

Solution

  • You can use multiple selector

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

    Or, You can also experiment using .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>

    Note: $('input') will also select checkboxes so its better to use :radio