复选框限制为 2 不起作用

Posted 2023-05-09

【中文标题】复选框限制为 2 不起作用

【英文标题】：checkbox limit to 2 is not working

【发布时间】：2018-02-15 16:57:51

【问题描述】：

我有一个简单的查询，它产生了一些问题。 单击任意两个复选框需要向下滑动一个 div。但是当我检查两个并尝试单击第三个时，它会显示 div 并禁用进一步单击。尝试过 .length >2，尝试过 .length ==2。没有得到正确的结果。 以下是我的代码

<input class="single-checkbox" type="checkbox" name="mixitt" value="1"> one <br>
<input class="single-checkbox" type="checkbox" name="mixitt" value="2"> two <br>
<input class="single-checkbox" type="checkbox" name="mixitt" value="3"> three <br>

我的脚本正在跟踪

$('.single-checkbox').on('change', function() 
    if($('.single-checkbox:checked').length == '2') 
        $('.mixflav').slideDown();
        $(this).prop('checked', false);         
     else 
        $('.mixflav').slideUp();
               
);

温馨提示

【问题讨论】：

这个 feddle 示例正在运行，它与 jsfiddle.net/devmount/n9g5hswo

相同

添加两个 if 条件来检查是否有两个输入被检查或超过两个被检查。

【参考方案1】：

您需要在此处进行两次检查，因为您希望 div 在恰好选中 2 个复选框时向下滑动。当尝试检查两个以上时，只需将该特定输入的 checked 属性设置为 false。

$('.single-checkbox').on('change', function() 
    if($('.single-checkbox:checked').length == 2) 
        $('.mixflav').slideDown();                
    else if($('.single-checkbox:checked').length > 2)
        $(this).prop('checked', false);    
    else 
        $('.mixflav').slideUp();
               
);

.mixflav 
  display:none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="single-checkbox" type="checkbox" name="mixitt" value="1"> one <br>
<input class="single-checkbox" type="checkbox" name="mixitt" value="2"> two <br>
<input class="single-checkbox" type="checkbox" name="mixitt" value="3"> three <br>

<div class="mixflav">
test
</div>

【讨论】：

first if 会向下滑动，然后 if 会禁用进一步点击 else div 保持显示：none

它就像魅力一样...谢谢 Kiran，拯救了我的一天。

不客气，萨尔曼。很高兴我能帮助你。请不要忘记检查正确答案。祝你有美好的一天。

【参考方案2】：

首先，length 不是字符串。使用数字比较。

if ($('.single-checkbox:checked').length === 2) 

接下来，您需要将=== 2 和> 2 的条件分开。如果您在值为 2 时取消选中该框，则它变为 1。

var checkedCount = $('.single-checkbox:checked').length;
if (checkedCount < 2) 
  $('.mixflav').slideUp();
 else if (checkedCount === 2) 
  $('.mixflav').slideDown();
 else 
  $(this).prop('checked', false);
   

【讨论】：

感谢 Sam R. 认为如果我使用 ===2 它不允许第二次检查启用。它立即停止检查功能

【参考方案3】：

这很简单。在您将选中的项目设为 false 的地方，您将在此处滑动您的 div。 .length 已经返回了一个数字类型的对象。因此您可以使用>、< 或== 检查它，其中=== 检查是否相等以及类型（数字或字符串文字）。

$('.single-checkbox').on('change', function() 
   if($('.single-checkbox:checked').length > 2) 
       this.checked = false;
       $('.mixflav1').slideDown();
   else if($('.single-checkbox:checked').length < 2)
       $('.mixflav1').slideUp();
   
);

$('.single-checkbox2').on('change', function() 
   if($('.single-checkbox2:checked').length > 1) 
       this.checked = false;
       $('.mixflav2').slideDown();
   else if($('.single-checkbox2:checked').length < 1)
       $('.mixflav2').slideUp();
   
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>First Selection (max 2)</h1>
<input class="single-checkbox"type="checkbox" name="test" value="1" />Item 1<br />
<input class="single-checkbox" type="checkbox" name="test" value="2" />Item 2<br />
<input class="single-checkbox" type="checkbox" name="test" value="3" />Item 3<br />
<input class="single-checkbox" type="checkbox" name="test" value="4" />Item 4<br />
<div class="mixflav1" style="display:none; ">
this is your desired div 1 
</div>
<hr />
<h1>Second Selection (max 1)</h1>
<input class="single-checkbox2" type="checkbox" name="test" value="1" />Item 1<br />
<input class="single-checkbox2" type="checkbox" name="test" value="2" />Item 2<br />
<input class="single-checkbox2" type="checkbox" name="test" value="3" />Item 3<br />


<div class="mixflav2" style="display:none">
this is your desired div 2 
</div>