I want to add a check/uncheck all button for this script:
php:
require_once('includes/commons.php');
$query_get_addresses = 'SELECT * FROM user ORDER BY first_name ASC, last_name ASC';
$result_get_addresses = mysql_query($query_get_addresses);
$addresses_count = mysql_num_rows($result_get_addresses);
?>
script:
<script>
$(document).ready(function() {
// initialize
var recipient = $('input[name=recipient]').val();
var recipient_array = new Array();
if(recipient != '') {
recipient_array = recipient.split(',');
for(var i = 0; i < recipient_array.length; i++) {
recipient_array[i] = $.trim(recipient_array[i]);
if(recipient_array[i] == '')
recipient_array.splice(i, 1);
}
$('input[type=checkbox]').each(function() {
if($.inArray(this.value, recipient_array) >= 0) {
$(this).attr('checked', true);
}
});
}
// add and/or remove
$('input[type=checkbox]').click(function() {
var recipient_list = '';
$('input[type=checkbox]').each(function() {
var index = $.inArray(this.value, recipient_array);
if(this.checked) {
if(index < 0)
recipient_array.push(this.value);
}
else {
if(index >= 0) {
recipient_array.splice(index, 1);
}
}
});
$('input[name=recipient]').val(recipient_array);
});
});
</script>
html:
<h2>Choose recipient</h2>
<div><?php
if($addresses_count > 0) {
?><form name="select-recipient-form"><ul><?php
while($row_get_addresses = mysql_fetch_assoc($result_get_addresses)) {
$row_get_addresses = unsanitize($row_get_addresses);
?><li><input type="checkbox" name="recipient[]" id="recipient-1" value="<?php echo $row_get_addresses['recipient']; ?>" /><label for="recipient-1"><?php echo $row_get_addresses['first_name'].' '.$row_get_addresses['last_name'].' <'.$row_get_addresses['recipient'].'>'; ?></label></li><?php
}
?></ul>
</form><br /><?php
} else {
?><p>You don't have any contacts.</p><?php
}
?>
</div>
I have tried to follow some guides. Like this one for example but I can't get it to work. Any idea how I can achieve this? Thanks
this worked for me:
<script type="text/javascript">
$('#form1').ready(function(){
$('.gumb:button').toggle(function(){
$('.tocheck ').attr('checked','checked');
$(this).val('uncheck all')
},function(){
$('.tocheck ').removeAttr('checked');
$(this).val('check all');
})
})
</script>
<input type="button" class="gumb" value="check all" />
<input name="checkbox[]" class="tocheck" type="checkbox" value="<?php echo $rows['member_id'] ?>" />
Add a class to you check boxes and then use:
<form ...>
<input type="checkbox" class="check-class" ... />
...
<button type="button" class="check-all">Check All</button>
</form>
<script type="text/javascript">
(function() {
var checked = false;
$('button.check-all').click(function() {
checked = !checked;
$('.checkbox-class').prop('checked', checked); // jQuery 1.6+
if (checked) $(this).text('Uncheck All');
else $(this).text('Check All);
});
})();
</script>
<span><input type="checkbox" class="checkall" />check all</span>
Add a class to all your checkboxes except the check all check box
<input type="checkbox" class="tocheck ... />
...
....
$(document).ready(function(){
$('.checkall').click(function() {
$('.tocheck ').attr('checked', true);
});
});
If following is the HTML <input class="checkbox-class" type="checkbox" value="1" /><input class="checkbox-class" type="checkbox" value="2" /> <input class="checkbox-class" type="checkbox" value="3" /> <input type="button" id="clickit" value="Check All" />
JS will do the job
$("#clickit").click(function() {
if ($(this).val() == 'Check All') {
$('.checkbox-class').attr('checked', 'checked');
$(this).val('Uncheck All');
} else {
$('.checkbox-class').removeAttr('checked');
$(this).val('Check All');
}
});
This code works fine with me
Jquery
<script type="text/javascript">
$(document).ready(function(){
$("#select_all").change(function(){
$(".checkbox_class").prop("checked", $(this).prop("checked"));
});
});
</script>
you only need to add class checkbox_class to all checkbox
HTML
<input type="checkbox" id="selecctall">
<input class="checkbox_class" name="recipient[]" value="'.$recipientId.'" type="checkbox" />
Easy and simple :D
Only that worked for me (btw uses checkbox, not button)
<script type="text/javascript">
$(document).ready(function(){
$('#select_all').on('click',function(){
if(this.checked){
$('.checkbox').each(function(){
this.checked = true;
});
}else{
$('.checkbox').each(function(){
this.checked = false;
});
}
});
$('.checkbox').on('click',function(){
if($('.checkbox:checked').length == $('.checkbox').length){
$('#select_all').prop('checked',true);
}else{
$('#select_all').prop('checked',false);
}
});
});
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
<ul class="main">
<li><input type="checkbox" id="select_all" /> Select all</li>
<ul>
<li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
<li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
<li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
<li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
<li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
</ul>
</ul>
Check-uncheck all / select-unselect all checkboxes Follow the following code , its really simple with the following code
inside your html form add the following line of code
<input type="checkbox" id='checkall' /> Select All
and use the following script code
<script type='text/javascript'>
$(document).ready(function(){
// Check or Uncheck All checkboxes
$("#checkall").change(function(){
var checked = $(this).is(':checked');
if(checked){
$(".checkbox").each(function(){
$(this).prop("checked",true);
});
}else{
$(".checkbox").each(function(){
$(this).prop("checked",false);
});
}
});
// Changing state of CheckAll checkbox
$(".checkbox").click(function(){
if($(".checkbox").length == $(".checkbox:checked").length) {
$("#checkall").prop("checked", true);
} else {
$("#checkall").removeAttr("checked");
}
});
});
</script>
keep in mind that .checkbox in script code is the class name from other checkboxes of html form
for example if you have input checkbox as following
<input class="checkbox" name="emailid[]" type="checkbox" value="<?php echo $email;?>" />
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.