Question

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

首先它可以正常工作，但不适用于第二个列表。

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

段：

＆＃13;

$(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();
            }
        });
    });
});

＆＃13;

<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>

＆＃13;

Answer 1

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

list-1 AND list-2

Answer 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();
    }
});

请参阅代码段以获取完整的工作示例：

$(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>

Answer 3

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

而不是对长度7和5进行硬编码，您可以改变测试的意义 - 如果有任何未选中的框，则隐藏消息框。

＆＃13;

$(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();
      }
    });
  });
});

＆＃13;

<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>

＆＃13;

多个Javascript函数一次不起作用

3 个答案: