I have 4 sets of radio buttons and based on the radio button selection, want to limit the checkbox selection while keeping previously selected values.
For example, for option 1(radio button), only 4 checkboxes can be selected, and for option 2( radio button), the limit is 6 checkboxes but if I select option 2 after selecting 4 values(checkboxes) from option 1 then the second option should have 2 more values to select keeping previously selected values.
Any help would be appreciated.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="radio_cont">
<input type="radio" name="box" value="box_4"/>pack of 4
<input type="radio" name="box" value="box_6"/>pack of 6
<input type="radio" name="box" value="box_9"/>pack of 9
<input type="radio" name="box" value="box_11"/>pack of 11
</div>
<div class="result_sel">
<input type="checkbox" name="gift" value ="1"/>One<br />
<input type="checkbox" name="gift" value ="2"/>Two <br />
<input type="checkbox" name="gift" value ="3"/>three<br />
<input type="checkbox" name="gift" value ="4"/>four<br />
<input type="checkbox" name="gift" value ="5"/>five<br />
<input type="checkbox" name="gift" value ="6"/>six<br />
<input type="checkbox" name="gift" value ="7"/>seven<br />
<input type="checkbox" name="gift" value ="8"/>eight<br />
<input type="checkbox" name="gift" value ="9"/>nine<br />
<input type="checkbox" name="gift" value ="10"/>ten<br />
<input type="checkbox" name="gift" value ="11"/>eleven<br />
</div>use this:
const parent = document.querySelector( ".result_sel" );
parent.querySelectorAll( "input[type='checkbox']" ).forEach( input => {
input.addEventListener( "change", check_limit )
} );
function check_limit() {
const radio_1 = document.getElementById( "box_4" );
const radio_2 = document.getElementById( "box_6" );
const radio_3 = document.getElementById( "box_9" );
const radio_4 = document.getElementById( "box_11" );
const select_all_checked = parent.querySelectorAll( "input:checked" );
if ( radio_1.checked ) {
//only available 4 checkbox
if ( select_all_checked && select_all_checked.length > 4 ) {
this.checked = false;
return;
}
} else if ( radio_2.checked ) {
if ( select_all_checked && select_all_checked.length > 6 ) {
this.checked = false;
return;
}
} else if ( radio_3.checked ) {
if ( select_all_checked && select_all_checked.length > 9 ) {
this.checked = false;
return;
}
} else if ( radio_4.checked ) {
if ( select_all_checked && select_all_checked.length > 11 ) {
this.checked = false;
return;
}
}
}<div class="radio_cont">
<input type="radio" name="box" value="4" id="box_4"/>pack of 4
<input type="radio" name="box" value="6" id="box_6"/>pack of 6
<input type="radio" name="box" value="9" id="box_9"/>pack of 9
<input type="radio" name="box" value="11" id="box_11"/>pack of 11
</div>
<div class="result_sel">
<input type="checkbox" name="gift" value ="1"/>One<br />
<input type="checkbox" name="gift" value ="2"/>Two <br />
<input type="checkbox" name="gift" value ="3"/>three<br />
<input type="checkbox" name="gift" value ="4"/>four<br />
<input type="checkbox" name="gift" value ="5"/>five<br />
<input type="checkbox" name="gift" value ="6"/>six<br />
<input type="checkbox" name="gift" value ="7"/>seven<br />
<input type="checkbox" name="gift" value ="8"/>eight<br />
<input type="checkbox" name="gift" value ="9"/>nine<br />
<input type="checkbox" name="gift" value ="10"/>ten<br />
<input type="checkbox" name="gift" value ="11"/>eleven<br />
</div>