多个Javascript函数一次不起作用答案

【问题标题】：Multiple Javascript function does not work at a time多个Javascript函数一次不起作用
【发布时间】：2015-09-26 10:51:34
【问题描述】：

我有 <ul> <li> 列表。我创建了在所有<li> 复选框选中的消息框内都会出现的代码。

它适用于第一个列表，但不适用于第二个列表。

另一个问题是在复选框的页面上。该消息将出现在任何选中的复选框上。

片段：

$(document).ready(function() {
  
    var Onee = $("#one, #two, #three, #four, #five, #six, #seven");
    var Two = $("#eight, #nine, #ten, #eleven, #twelve");
  
    $(function() {
        $(".chk-message16").hide();
        Onee.on('change', function() {
            if ($('input[type=checkbox]:checked').length == 7) {
                $(".chk-message16").show();
            } else {
                $(".chk-message16").hide();
            }
        });
    });
  
    $(function() {
        $(".chk-message8").hide();
        Two.on('change', function() {
            if ($('input[type=checkbox]:checked').length == 5) {
                $(".chk-message8").show();
            } else {
                $(".chk-message8").hide();
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<ul class="list-group">
    <li class="list-group-item"><input type="checkbox" id="one"> one</li>
    <li class="list-group-item"><input type="checkbox" id="two"> two</li>
    <li class="list-group-item"><input type="checkbox" id="three"> three</li>
    <li class="list-group-item"><input type="checkbox" id="four"> four</li>
    <li class="list-group-item"><input type="checkbox" id="five"> five</li>
    <li class="list-group-item"><input type="checkbox" id="six"> six</li>
    <li class="list-group-item"><input type="checkbox" id="seven">seven</li>
    
  <!-- if all selected show this message box-->
    <div class="chk-message16">
        <h1>Message</h1>
        <textarea></textarea>
    </div>
</ul><br/><br/>

<ul class="list-group">
    <li class="list-group-item"><input type="checkbox" id="eight">one</li>
    <li class="list-group-item"><input type="checkbox" id="nine"> two</li>
    <li class="list-group-item"><input type="checkbox" id="ten">three</li>
    <li class="list-group-item"><input type="checkbox" id="eleven">four</li>
    <li class="list-group-item"><input type="checkbox" id="twelve">five</li>
    
  <!-- if all selected show this message box-->
    <div class="chk-message8">
        <h1>Message</h1>
        <textarea></textarea>
    </div>
</ul>

【问题讨论】：

效果很好...“不工作”是什么意思？
它工作正常，但我认为你的问题是当你检查第一组中的一些 checkboxes 和第二组中的一些时。是你的问题吗？
它仅适用于第一，Ul li 部分。如果您选中第二个，则不会出现消息框。 * 还要检查第一个列表中的 4 个复选框和第二个中的几个复选框，然后出现第一个消息框。
是的，@Algosub 完全正确，我希望消息框应该出现在特定的 ul li 列表中。并且所有 ul li 列表组都应该工作
然后@Mohammad Yekta 正确修复了您的代码。问题在于$('input[type=checkbox]:checked')。它捕获了所有选中的checkboxes，而不是特定组中的。

标签： javascript jquery html css checkbox

【解决方案1】：

我通过为每个列表添加唯一类来修复您的代码：See Here

list-1 AND list-2

【讨论】：

为什么使用jsfiddle而不是直接复制栈sn-p在这里修改？
有一个不错的大按钮可以帮您完成：将片段复制到答案

【解决方案2】：

我可能会迟到，但这里有一个解决方案，使用列表 ID 使其更通用，并考虑到该列表中的复选框数量：

var list1 = $('#list1').find('input[type=checkbox]');

list1.on('change', function() {
    if ($('#list1').find('input[type=checkbox]:checked').length == list2.length) {
        $(".chk-message16").show();
    } else {
        $(".chk-message16").hide();
    }
});

完整的工作示例请参见 sn-p：

$(document).ready(function() {
  $(function() {
    $(".chk-message16").hide();
    $(".chk-message8").hide();

    var list1 = $('#list1').find('input[type=checkbox]');
    var list2 = $('#list2').find('input[type=checkbox]');

    list1.on('change', function() {
      if ($('#list1').find('input[type=checkbox]:checked').length == list2.length) {
        $(".chk-message16").show();
      } else {
        $(".chk-message16").hide();
      }
    });
    list2.on('change', function() {
      if ($('#list2').find('input[type=checkbox]:checked').length == list2.length) {
        $(".chk-message8").show();
      } else {
        $(".chk-message8").hide();
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<ul class="list-group" id="list1">
  <li class="list-group-item">
    <input type="checkbox" id="one">one</li>
  <li class="list-group-item">
    <input type="checkbox" id="two">two</li>
  <li class="list-group-item">
    <input type="checkbox" id="three">three</li>
  <li class="list-group-item">
    <input type="checkbox" id="four">four</li>
  <li class="list-group-item">
    <input type="checkbox" id="five">five</li>
  <li class="list-group-item">
    <input type="checkbox" id="six">six</li>
  <li class="list-group-item">
    <input type="checkbox" id="seven">seven</li>
  <!-- if all selected show this message box-->
  <div class="chk-message16">
    <h1>Message</h1>
    <textarea></textarea>
  </div>
</ul>
<br/>
<br/>
<ul class="list-group" id="list2">
  <li class="list-group-item">
    <input type="checkbox" id="eight">one</li>
  <li class="list-group-item">
    <input type="checkbox" id="nine">two</li>
  <li class="list-group-item">
    <input type="checkbox" id="ten">three</li>
  <li class="list-group-item">
    <input type="checkbox" id="eleven">four</li>
  <li class="list-group-item">
    <input type="checkbox" id="twelve">five</li>
  <!-- if all selected show this message box-->
  <div class="chk-message8">
    <h1>Message</h1>
    <textarea></textarea>
  </div>
</ul>

【讨论】：

【解决方案3】：

您应该将计数限制在每组中的特定输入集。

而不是硬编码长度7 和5，您可以颠倒测试的意义——如果有任何未选中的框，隐藏消息框。

$(document).ready(function(){

  var Onee = $("#one, #two, #three, #four, #five, #six, #seven");
  var Two = $("#eight, #nine, #ten, #eleven, #twelve");

  $(function(){
    $(".chk-message16").hide();
    Onee.on('change', function() {       
      if(Onee.is(":not(:checked)")){
        $(".chk-message16").hide();
      }else{
        $(".chk-message16").show();
      }
    });
  });

  $(function(){
    $(".chk-message8").hide();
    Two.on('change', function() {       
      if(Two.is(":not(:checked)")){
        $(".chk-message8").hide();
      }else{
        $(".chk-message8").show();
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul class="list-group">
  <li class="list-group-item"><input type="checkbox" id="one"> one</li>
  <li class="list-group-item"><input type="checkbox" id="two"> two</li>
  <li class="list-group-item"><input type="checkbox" id="three"> three</li>
  <li class="list-group-item"><input type="checkbox" id="four"> four</li>
  <li class="list-group-item"><input type="checkbox" id="five"> five</li>
  <li class="list-group-item"><input type="checkbox" id="six"> six</li>
  <li class="list-group-item"><input type="checkbox" id="seven">seven</li>
  <!-- if all selected show this message box-->
  <div class="chk-message16">
    <h1>Message</h1>
    <textarea></textarea>
  </div>
</ul>
<br/>
<br/>
<ul class="list-group">
  <li class="list-group-item"><input type="checkbox" id="eight">one</li>
  <li class="list-group-item"><input type="checkbox" id="nine"> two</li>
  <li class="list-group-item"><input type="checkbox" id="ten">three</li>
  <li class="list-group-item"><input type="checkbox" id="eleven">four</li>
  <li class="list-group-item"><input type="checkbox" id="twelve">five</li>
  <!-- if all selected show this message box-->
  <div class="chk-message8">
    <h1>Message</h1>
    <textarea></textarea>
  </div>
</ul>

【讨论】：