select and unselect all checkboxes doesn't work when implementing javascript script
Question
my code:
<body>
<input type="button" class="btn-primary btn-mini" id="check1" value="Check All" />
<input type="hidden" id="isChkd" value="true"/>
<input type="checkbox" name="" value="" class="cb1-element"> <a href="../upload/Zdjecia-0006.jpg" data-lightbox='image'><img src='../upload/Zdjecia-0002.jpg' height=50/></a>
<input type="checkbox" name="" value="" class="cb1-element"> <a href="../upload/Zdjecia-0008.jpg" data-lightbox='image'><img src='../upload/Zdjecia-0008.jpg' height=50/></a>
<input type="checkbox" name="" value="" class="cb1-element"> <a href="../upload/Zdjecia-0004.jpg" data-lightbox='image'><img src='../upload/Zdjecia-0004.jpg' height=50/></a>
<input type="checkbox" name="" value="" class="cb1-element"> <a href="../upload/Zdjecia-0005.jpg" data-lightbox='image'><img src='../upload/Zdjecia-0005.jpg' height=50/></a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('#check1').click(function(){
if($('#isChkd').val() == 'true'){
$('.cb1-element').attr('checked','checked');
$(this).val('Uncheck All');
$('#isChkd').val('false');
}
else{
$('.cb1-element').removeAttr('checked');
$(this).val('Check All');
$('#isChkd').val('true');
}
});
$('.cb1-element').change(function(){
var all = $('input.cb1-element').length;
var checked = $('input.cb1-element:checked').length;
if(all == checked){
$('#check1').val('Uncheck All');
$('#isChkd').val('false');
}else{
$('#check1').val('Check All');
$('#isChkd').val('true');
}
});
</script>
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/lightbox-2.6.min.js"></script>
</body>
When I adding "../js/jquery-1.11.0.min.js" checking script working only once (when i clicked more than 2 times nothing happen). When I removing "../js/jquery-1.11.0.min.js" checking script working but the lightBox deosnt' work. Anybody knows something about this problem?
3 answers
solution1
0 2014-04-13 12:14:40
first of all include your code inside $(document).ready()
Then to check all try instead of this:
$('.cb1-element').attr('checked','checked');
this:
$('.cb1-element').attr('checked',true);
and to uncheck all try this:
$('.cb1-element').attr('checked',false);
solution2
0 2014-04-13 12:16:25
It seems you are including jquery script twice in your page. One on line number 8 as:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
and second on line number 35 as:
<script src="../js/jquery-1.11.0.min.js"></script>
Try removing the first jquery script tag, and replace it with the second one (ie replace line number 8 with line number 35)
solution3
0 2014-04-13 12:51:48
Here is your working code.I have checked it at my end.If you need then can make a jsbin for the same .
$('#check1').click(function() {
if ($('#isChkd').val() == 'true') {
$('.cb1-element').prop('checked', true);
$(this).val('Uncheck All');
$('#isChkd').val('false');
} else {
$('.cb1-element').prop('checked', false);
$(this).val('Check All');
$('#isChkd').val('true');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.