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