Limit to checkbox selection with radio button but keeping previously checked values-CodePudding

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

CodePudding user response：

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