jquery中的复选框依赖项

Checkbox dependencies in jquery

本文关键字：依赖 复选框 jquery      更新时间：2023-09-26

我正在尝试实现各种复选框之间的依赖关系，但是，我有一个简单的场景，即如果和复选框未选中，则其他复选框也应按升序取消选中。假设第一个复选框有id=1，我总共有5个复选框，如果第一个复选复选框未选中，则id大于当前id的其他复选框也应未选中，即id=2, id=3, id=4, id=5也应未勾选，依此类推

我的代码：

<input type="checkbox" id="1" class="cb">
<input type="checkbox" id="2" class="cb">
<input type="checkbox" id="3" class="cb">
<input type="checkbox" id="4" class="cb">
<input type="checkbox" id="5" class="cb">
$('input.CB').on('change', function() {
    $('input.CB').not(this).prop('checked', false);  
});

如果我正确理解了你的问题，你正在寻找这样的东西：

lowest_unchecked = false;
$('.cb').on('change', function(){
    $('.cb').each(function(){
        if( !$(this).prop( 'checked' ) ){
            lowest_unchecked = $(this).attr('id');
        }
        if( lowest_unchecked !== false && lowest_unchecked < $(this).attr('id') ){
            $(this).prop('checked', false);
        }
    });
});

如果不让它检查id比发生更改的id小，它可能会变得更高效，但这可能会满足您的需求。

编辑：应要求添加小提琴：https://jsfiddle.net/93o1kkjn/1/

相关文章：