jQuery

Question

我有 5 个复选框和 5 个 divs...在取消选中每个复选框时我隐藏了相关的 div.

但是，如果计数小于 2，我如何停止取消选中复选框并显示 警告消息 <div class="warning">blablabla</div>?

请帮帮我。

Fiddle is Here

HTML:

<div class="show-hide-items">
    <span class="li-1">Item 1</span>
    <span class="li-2">Item 2</span>
    <span class="li-3">Item 3</span>
    <span class="li-4">Item 4</span>
    <span class="li-5">Item 5</span>
</div>


<div class="warning">Atleast <b>2</b> items are mandatory</div>

<label><input type="checkbox" value="one" checked /> Hide Item 1</label>
<label><input type="checkbox" value="two" checked /> Hide Item 2</label>
<label><input type="checkbox" value="three" checked /> Hide Item 3</label>
<label><input type="checkbox" value="four" checked /> Hide Item 4</label>
<label><input type="checkbox" value="five" checked /> Hide Item 5</label>

jQuery:

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if($(this).attr("value")=="one"){$(".li-1").toggle();}
        if($(this).attr("value")=="two"){$(".li-2").toggle();}
        if($(this).attr("value")=="three"){$(".li-3").toggle();}
        if($(this).attr("value")=="four"){$(".li-4").toggle();}
        if($(this).attr("value")=="five"){$(".li-5").toggle();}
    });
});

CSS:

body{font-family:arial;font-size:13px;}
.show-hide-items{margin-bottom:40px;}
span{display:block;background:#ccc;margin-bottom:5px;padding:10px;}
label{display:block;margin-bottom:5px;}
.warning{display:none;background-color:#f2dede;border:1px solid #ebccd1;color:#a94442;padding:10px;text-align:center;margin-bottom:5px;}

Answer 1

您可以使用：

$('input[type="checkbox"]:checked').length

有了它，您可以确定选中了多少个复选框。

例如：

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if($(this).hasClass('disabled')) {
            return false;
        }
        if($(this).attr("value")=="one"){$(".li-1").toggle();}
        if($(this).attr("value")=="two"){$(".li-2").toggle();}
        if($(this).attr("value")=="three"){$(".li-3").toggle();}
        if($(this).attr("value")=="four"){$(".li-4").toggle();}
        if($(this).attr("value")=="five"){$(".li-5").toggle();}

        var checked = $('input[type="checkbox"]:checked');
        if(checked.length == 2) {
            $('.warning').show();
            checked.addClass('disabled')
        }else if (checked.length > 2) {
            checked.removeClass('disabled');
        }
    });
});

更新：检查更新后的代码。基本上我正在做的是向剩余的复选框添加一个 class(disabled) 并且在 onclick 处理程序的开头我正在检查单击的复选框是否具有禁用 class 以及是否具有我正在逃避默认行为。

建议：尽量不要滥用 jquery 构造函数。而是尝试使用可重用的变量。例如代替：

$(this).attr('value');
...
$(this).someMethod();

使用这样的东西：

var $this = $(this)

$this.attr('value');
...
$this.someMethod();

这样你就不会一遍又一遍地重建同一个变量。还有每次你做

$('some selector');

它将查看 dom，这是一项昂贵的操作。

Answer 2

你可以用计数器变量来维护同样的事情。

var ctr = 5;
$(document).ready(function(){

    $('input[type="checkbox"]').click(function(){
        if(ctr <= 2){
            $(".warning").css("display","block");
        }
        if($(this).attr("value")=="one"){$(".li-1").toggle();}
        if($(this).attr("value")=="two"){$(".li-2").toggle();}
        if($(this).attr("value")=="three"){$(".li-3").toggle();}
        if($(this).attr("value")=="four"){$(".li-4").toggle();}
        if($(this).attr("value")=="five"){$(".li-5").toggle();}
        ctr--;
    });
});

如果计数小于或等于 2，则 div 可见。

Answer 3

试试这个

$(document).ready(function(){
var click = 0;

$('input[type="checkbox"]').click(function(){

    if(click < 3){
    if($(this).attr("value")=="one"){$(".li-1").toggle();}
    if($(this).attr("value")=="two"){$(".li-2").toggle();}
    if($(this).attr("value")=="three"){$(".li-3").toggle();}
    if($(this).attr("value")=="four"){$(".li-4").toggle();}
    if($(this).attr("value")=="five"){$(".li-5").toggle();}
    }else{
        $(".warning").show();
    }
  click++;
});

});

Answer 4

好的那你可以试试这个

$(document).ready(function(){

$('input[type="checkbox"]').click(function(){
   if($('input[type="checkbox"]:checked').length > 2){

    if($(this).attr("value")=="one"){$(".li-1").toggle();}
    if($(this).attr("value")=="two"){$(".li-2").toggle();}
    if($(this).attr("value")=="three"){$(".li-3").toggle();}
    if($(this).attr("value")=="four"){$(".li-4").toggle();}
    if($(this).attr("value")=="five"){$(".li-5").toggle();}
    }else{
        $(".warning").show();
    }

});

});

Answer 5

这可以用更少的代码实现

添加一个class到跨度项目，它与相关复选框的值同名。

<span class="one someOtehrClass">Item 1</span>

然后，更改点击事件

$('input[type="checkbox"]').click(function(){
        if($('input:checked').length <=2){
            $('.warning').show();
            return false;
        }

        $('.warning').hide();
        var item = $(this).val();        
        $('span.'+item).toggle();       
    });

参见Fiddle。

(注意：JFI 复选框的文本显示 'Hide' 但是选中时显示该项目，取消选中时隐藏该项目，可能需要更改文本或初始状态复选框。）

jQuery - 任意 2 个复选框必须从多个复选框中选中

jQuery - Any 2 Checkboxes are mandatorily checked from many

checkbox

counter

Fiddle is Here