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