Question

我有以下javascript代码，适用于大多数复选框，其中脚本确定是否选中了多个复选框，如果是，则隐藏其余复选框：

var limit = 1;

$('input[type="checkbox"]').on('change', function(evt) {
    console.log('checkboxSelectedLimit: detects checkbox');
    if ($(this).siblings(':checked').length >= limit) {
        this.checked = false;
        console.log('too many checkboxes selected');
    }
});

使用以下html结构：

<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>

但是当我将复选框移动到如下所示的有序列表中时：

<ul>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2</li>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3</li>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4</li>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5</li>
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1</li>
</ul>

我的javascript确实触发它被检查，但是.siblings()似乎没有被触发，因为它不起作用。我假设我需要更新此脚本以定位ul li中的项目，但是当我更改时：

$('input[type="checkbox"]').on('change', function(evt)

到

$('ul li input[type="checkbox"]').on('change', function(evt)

它不起作用。

任何比我更聪明的人都会非常感激。

Answer 1

结构是li>输入，所以你需要找到li对象。

＆＃13;

var limit = 1;

    $('input[type="checkbox"]').on('change', function(evt) {
        console.log('checkboxSelectedLimit: detects checkbox');
        if($(this).parent().siblings().find("input[type=checkbox]:checked").length >= limit) {
            this.checked = false;
            console.log('too many checkboxes selected');
        }
        
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2</li>
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3</li>
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4</li>
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5</li>
<li><input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1</li>
</ul>

＆＃13;

Answer 2

而不是将你的选择器绑定到你可能希望将来再次更改的dom结构，然后重新打破这个，我建议按名称定位复选框。

所以不是这一行：

if($(this).siblings(':checked').length >= limit) {

尝试这样的事情：

if($('input[name=vehicle]:checked').length >= limit) {

甚至更好，使用 $（this）中已有的名称动态获取输入名称：

if($('input[name=' + $(this).attr('name') + ']:checked').length >= limit) {

如何使用.siblings（）在javascript中定位ul li输入复选框项目

2 个答案: