Question

所以，我有几个复选框，根据选择的数量，我需要在屏幕上显示一条消息：

<div class="container">

<h2>Pick you toppings (3 max):</h2>

<input type="checkbox" name="one" id="one"> Option 1<br>
<input type="checkbox" name="two" id="two"> Option 2<br>        
<input type="checkbox" name="three" id="three"> Option 3<br>
<input type="checkbox" name="four" id="four"> Option 4<br>
<input type="checkbox" name="five" id="five"> Option 5<br>
</div>

<div class="submited">

<button id="submit">Submit!</button>

<p></p>
</div>

jquery的想法是，当没有选中复选框时，应该显示一条消息（在<p>之间），我们需要选择至少1.我们可以最多选择3个选项，以及选项4并且不能同时挑选5个。

一旦我们按下提交，警告就会弹出错误（如果是这种情况）或成功（如果上述情况都不发生）。

我似乎无法让javascript部分工作..

这是我到目前为止所做的：

$(":checkbox").change(function() {

if($(":checkbox:checked").length > 3){
$('p').html("You can not pick more than 3")

} else if ($(":checkbox:checked").length < 1){
$('p').html("Pick at least 1")

} else if ($('#four').is(':checked') && $('#five').is(':checked')){
$('p').html("Can not pick those 2")

} else{
$('p').html("hmmm")
}

}）;

Answer 1

<h2>Pick you toppings (3 max):</h2>

<input type="checkbox" name="one" id="one"> Option 1<br>
<input type="checkbox" name="two" id="two"> Option 2<br>        
<input type="checkbox" name="three" id="three"> Option 3<br>
<input type="checkbox" name="four" id="four"> Option 4<br>
<input type="checkbox" name="five" id="five"> Option 5<br>
</div>

<div class="submited">

<button id="submit" onclick="check()">Submit!</button>

<p></p>
</div>      

<script>
function check(){
                if($(":checkbox:checked").length > 3){
                    alert("too much box checked.");
                } else if ($(":checkbox:checked").length < 1){
                    alert("not enought box check.")

                } else if ($('#four').is(':checked') && $('#five').is(':checked')){
                    alert("can't choose the five and the fourth box in the same time.")

                } else{
                    alert("Works!")
                }
            }
</script>

您的代码似乎很好，但如果您想要弹出一个警告，您可以使用它。如果这个答案没有帮助你，你能解释一下你想要的吗，请

Answer 2

$(document).ready(function(){    
    $("#submit").click(function(){
        var len = $("input[type='checkbox']:checked").length;
           if(len > 3){
           $("p").html("Select a max of 3");
           }
           else if (len == 0){
           $("p").html("Select at least one");
           }
        });
    });

希望这有帮助。

Jquery跟踪复选框的更改

2 个答案: