Question

我有一个简单的查询，这是一个问题。点击任意两个复选框需要slideDown一个div。但当我检查两个并尝试点击第三个然后它显示div并禁用进一步点击。试过.length＆gt; 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();
    }           
});

善意的建议

Answer 1

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

＆＃13;

$('.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();
    }           
});

＆＃13;

.mixflav {
  display:none;
}

＆＃13;

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

＆＃13;

Answer 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);
}

Answer 3

这很简单。如果你伪造你的选中项目，在这里你滑动你的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>

复选框限制为2不起作用

3 个答案: