samedi 26 septembre 2015

Multiple Javascript function does not work at a time

I have Ul li lists, I made a code that whithin all Li checkbox checked message box will appear.

It works fine for first but does not works for other ul li list . I have a fiddle ready can any one help me get sorted ?

Other issue is On whole list on page of checkbox, whithin any Ul li checked 1st message box appear.

Snippet:

$(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="http://ift.tt/VorFZx"></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>



Aucun commentaire:

Enregistrer un commentaire