使用单选按钮限制为复选框选择，但保留以前选中的值

Question

我有 4 组单选按钮，基于单选按钮 selection，想要限制复选框 selection，同时保持之前 selected 的值。

例如，对于选项 1（单选按钮），只能 select 编辑 4 个复选框，对于选项 2（单选按钮），限制为 6 个复选框，但如果我 select选项 2 在 select 从选项 1 中输入 4 个值（复选框）之后，第二个选项应该有 2 个值 select 保持以前 selected 值。

如有任何帮助，我们将不胜感激。

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

Answer 1

使用这个：

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>

使用单选按钮限制为复选框选择，但保留以前选中的值

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

html

javascript

jquery