至少选中两个复选框时显示 div

Question

我需要在选中两个或更多复选框时显示 div。我有一个工作的 JSfiddle。 JavaScript 变为

 <script type="text/javascript">
                $(function(){
                 $('#checkobox').change(function(){
                   alert($('input:checked').size())
                       if($('input:checked').size() > 1){
                        $('div').show();   
                   }
                   else {
                        $('div').hide()   
                   }
                 });
            </script>

html内容

         <input type="checkbox" id="one"></input>
         <input type="checkbox" id="one"></input>
         <input type="checkbox" id="one"></input>
         <div style="display: none;">At least 2 are checked</div>

我在同一页面中有另一个脚本 select 所有，这两个复选框是否冲突 selecting。

<script language="javascript" type="text/javascript">
                $(document).ready(function() {
                $('#checkall').click(function(event) {  //on click 
                    if(this.checked) { // check select status
                        $('.checkbox1').each(function() { 
                            this.checked = true;                
                        });
                    }else{
                        $('.checkbox1').each(function() { 
                            this.checked = false;                    
                        });         
                    }
                });
            });
       </script>

此代码工作正常，但在本地主机和服务器中无效。展示你的技能...并给我一个解决方案...谢谢

Answer 1

您需要将脚本包装在 $(function(){ 或 $(document).ready(function(){ 中，以便在整个 DOM 准备就绪时将更改事件绑定到复选框。还要确保在 HTML 中但在脚本之前包含 jQuery 库。

编辑：- 要消除与另一个脚本的冲突，您可以将 class="one" 放入复选框（我已删除 id="one"，因为您不能对多个元素使用相同的 ID），如下所示并进行更改相应的脚本

HTML

<input type="checkbox" class="one"></input>
<input type="checkbox" class="one"></input>
<input type="checkbox" class="one"></input>
<div style="display: none;">At least 2 are checked</div>

jQuery :

$(function(){
  $('input[type=checkbox].one').change(function(){
    alert($('input[type=checkbox].one:checked').size())
        if($('input[type=checkbox].one:checked').size() > 1){
         $("div").show();   
    }
    else {
         $('div').hide()   
    }
  });
});

JSFiddle Demo

至少选中两个复选框时显示 div

show a div when atleast two checkboxes has checked

checkbox

jquery

button