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>

我在同一页面中有另一个脚本来选择全部，这两个复选框选择是否冲突。

<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

1 个答案: