I'm having a problem with jquery.
I have a checkbox with ID "#checkAll" and checkboxes with class "checkboxes".
I'd like to turn all checkboxes on when the checkbox with ID "checkAll" is checked,
and I'd like to turn all checkboxes off when the checkbox with ID "checkAll" is checked off.
But, What's having now is that when I first click the checkbox(#checkAll), all other checkboxes are turned on and when I first turn the ckeckbox(#checkAll), all other checkboxs are turned off as well.
But, when I try to click the checkbox(#checkAll) in the second time, all other checkboxes are not turned on.
I don't know why this happens.
Please help me out!
This is my javascript handling events.
ADMIN.event = (function() {
function _init(){
$(function(){
var checkAll = $('#checkAll'),
checkboxes = $('.checkboxes');
checkAll.click(function(){
if($(this).is(':checked')){
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
})
});
}
_init();
}());
This is my view file in php.
<table class="fullTable">
<tr class="listTableTr">
<th class="listTableTh tinyTh"><input type="checkbox" name="" id="checkAll" /></th>
<th id="articleTitleTh" class="listTableTh">title</th>
</tr>
<?php foreach($postData as $post): ?>
<td class="listTableTd"><input type="checkbox" name="" class="checkboxes" /></td>
<td class="listTableTd"><?php echo $post['title'];?></td>
<?php endforeach; ?>
</table>
Try with .prop() like
checkAll.click(function(){
checkboxes.prop('checked',this.checked);
});
And its better to use even with .on() like
checkAll.on('click' , function(){
checkboxes.prop('checked',this.checked);
});
Try this :
$('#checkAll').on('click',function(){
if($("#checkAll").is(':checked')) {
$('.checkboxes').attr('checked',true);
} else {
$('.checkboxes').attr('checked',false);
}
});
DEMO
Try this
$("#checkAll").click(function () {
if ($(this).is(":checked"))
$(".checkboxes").prop("checked","checked");
else
$(".checkboxes").prop("checked",false);
});
Related
Good Day all...I'm having a multiple row which is fetched from my DB by foreach loop.
And I have 2 checkboxes in each row, What I'm trying is... If I check the 1st checkbox mean automatically the 2nd checkbox need to check.
For that I'm using ID to select that 2nd checkbox, Now because of that id is same for every row, if I select
1st row ,1st checkbox mean it's selecting all the second check box. But what I need is to get that particular selected row's 2nd checkbox need to be checked.
Anyone Help. Sorry for not sharing any live demo like jsfiddle. I hope u guys understand my problem.
<thead>
<th><input type="checkbox" id="select_all"></th>
</thead>
<?php foreach ($category_details as $key => $category_detail): ?>
<tr>
<td>
<input type="checkbox" class="checkbox" id="select_img" name="ids[]" value="<?php echo $category_detail['id'];?>"/>
<input type="checkbox" class="checkbox checkimg" name="imgs[]" value="<?php echo $category_detail['category_image'];?>"/>
</td>
<td>...</td> <!-- etc -->
</tr>
<?php endforeach ?>
$(document).ready(function(){
$('#select_all').on('click',function(){
if(this.checked){
$('.checkbox').each(function(){
this.checked = true;
});
}else{
$('.checkbox').each(function(){
this.checked = false;
});
}
});
$('#select_img').on('click',function(){
if(this.checked){
$('.checkimg').each(function(){
this.checked = true;
});
}else{
$('.checkimg').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);
}
});
});
You can use siblings jquery function. For example:
$('.whole_row').on('click',function(){
if(this.checked){
$(this).siblings().each(function(index, checkbox){
checkbox.checked = true;
});
}else{
$(this).siblings().each(function(index, checkbox){
checkbox.checked = false;
});
}
});
this way it will iterate the siblings tags and won't go outer the table rows. Just use classes not ids
Edit:
just a style note
$('.whole_row').on('click',function(){
let check = this.checked;
$(this).siblings().each(function(index, checkbox){
checkbox.checked = check;
});
});
html like this:
<tr>
<input type="checkbox" class="whole_row">one
<input type="checkbox">two
<input type="checkbox">three
<input type="checkbox">four
</tr>
i have a problem with checkbox . i want to check all when the first checkbox is checked. this is my code
<tr>
<td><label for="">Pilih Pendidikan</label></td>
<td style="text-align:left;">
<input type="checkbox" id="pilih_semua_pdk">Pilih Semua
<?php foreach ($query2 as $row2) {?>
<input class="form-control required check_pdk" type="checkbox" name="pendidikan[]" value="<?php echo $row2[id_pendidikan]; ?>"
<?php
$pendidikan = $_POST[pendidikan];
if ($pendidikan !=NULL) {
foreach($pendidikan as $pendidikan){
if ($pendidikan == $row2[id_pendidikan]) {
echo "checked";
}
}
}
?>
><?php echo $row2[nama_pendidikan]; ?>
<?php } ?>
</td>
</tr>
i try this code but doesnt work
<script>
$("#pilih_semua_pdk").click(function () {
$(".check_pdk").prop('checked', $(this).prop('checked'));
</script>
Try this, you need to bind an click event on first checkbox. On click of the first checkbox check if that is checked!. If yes then find all checkbox to get going.
$('#pilih_semua_pdk').on('click', function(){
if( $(this).is(':checked'))
{
//find parent td and its all checkboxes excluding first
$(this).parent().find('input[type=checkbox]').not('#pilih_semua_pdk').each(function(){
$(this).prop('checked', true);
});
}
});
jQuery makes this a piece of cake.
$(document).ready(function(){
// DOM has been loaded, attach click event for first checkbox
$('#pilih_semua_pdk').on('click', function(){
// verify if it is checked
if($(this).is(':checked'))
{
// check/tick the remaining checkboxes of the same td
$(this).siblings('.check_pdk').prop('checked', 'checked');
}
else
{
// do something when the first checkbox is unchecked
}
});
});
i am passing the class and id of chechboxes to the js function and try to make it dynamic to work for id and class of any checkbox to check all and uncheck all check boxes
here is the html
<input type="checkbox" name="reply_status[]" <?=$checked;?> class="memebers" value="<?=$status[$e]['mail_sent_id']?>">
</td>
<td>
<input type="checkbox" name="send_invoice[]" <?=$checked_send_invoice;?> class="send_invoice" value="<?=$status[$e]['mail_sent_id']?>">
</td>
<td>
<input type="checkbox" name="invoice_paid[]" <?=$checked_invoice_paid;?> class="invoice_paid" value="<?=$status[$e]['mail_sent_id']?>">
</td>
<td>
<input type="checkbox" id="check_all_re" name="check_all" onclick="checkall_members('memebers','check_all_re')">
Check All
</td>
<td>
<input type="checkbox" id="check_all_sv" name="check_all" onclick="checkall_members('send_invoice','check_all_sv')">
Check All
</td>
<td>
<input type="checkbox" id="check_all_ip" name="check_all" onclick="checkall_members('invoice_paid','check_all_ip')">
Check All
</td>
and here is the js function
<script type="text/javascript">
function checkall_members(chechboxclass, chechboxid) {
// var id = document.getElementById("check_all");
alert();
chechboxid = $('#' + chechboxid);
chechboxclass = $('.' + chechboxclass);
if (chechboxid.checked) {
chechboxclass.attr('checked', 'checked');
}
else {
chechboxclass.removeAttr('checked');
}
}
any help would be appreciated
Replace your if..else block with the following.
chechboxclass.prop('checked', chechboxid.prop('checked'));
By the way, it's checkbox and not chechbox.
To improve your code even more, get rid of the inline events:
$('input[name="check_all"]').on('change', function() {
$($(this).data('toggleAll')).prop('checked', this.checked);
});
Now you just need to add data-toggle-all=".send_invoice" etc. to those checkboxes. The param value should be the selector of the checkboxes you want to toggle with that checkbox.
If you have all the name="check_all" elements a class, you could also speed up the selector by using input.whatever_class instead of input[name="check_all"]
i have sorted out the simplest solution for my problem that is
<script type="text/javascript">
function checkall_members(chechboxclass, chechboxid) {
var checkbox = document.getElementById(chechboxid);
chechboxclass = $('.' + chechboxclass);
if (checkbox.checked) {
chechboxclass.attr('checked', 'checked');
}
else {
chechboxclass.removeAttr('checked');
}
}
</script>
i have to get the id elememt within same library of javascript thats why it was not working
var checkbox = document.getElementById(chechboxid);
thanks guys for helping me
I have a table with checkboxes and I want to do the "check all" and "un-check all" checkboxes but I could not find the way to check all the checkboxes.
Here is my code:
<form>
<?php foreach ($this->entries as $entry): ?>
<tr class="table_head_seperator">
<td class="grid_info" width="32px" bgcolor="#f6f6f6"><input type="checkbox" class="chk_boxes1" name="to_delete[<?PHP echo $entry['id'] ?>]" /></td>
<td class="grid_info" width="160px" bgcolor="#eeeeee"><span class="country_name"><?php echo $entry['user_name'] ?></span></td>
<td class="grid_info" width="130px" bgcolor="#eeeeee"><span class="country_name"><?php echo $entry['date_created'] ?></span></td>
<td class="grid_info" width="100px" bgcolor="#f6f6f6"><span class="country_name"><?php echo $entry['user_type_name'] ?></span></td>
</tr>
<?PHP endforeach; ?>
<input type="checkbox" class="chk_boxes" label="check all" />check all
<input type="checkbox" class="unchk_boxes" /> un-check all
</form>
<script type="text/javascript">
$(document).ready(function() {
$('.chk_boxes').click(function(){
$('.chk_boxes1').attr('checked',checked)
})
});
</script>
$(function() {
$('.chk_boxes').click(function() {
$('.chk_boxes1').prop('checked', this.checked);
});
});
This only affects the check all box. But why would you want to use two checkboxes anyway? One to check all and one to uncheck all, but not mutually exclusive. That's got to be the recipe to confuse users :)
Try using true|false. Like so:
$('.chk_boxes1').attr('checked',true);
Additional comment:
In addition, it appears your un- and check all checkboxes are redundant.
<input type="checkbox" class="chk_boxes" label="check all" />check all
<input type="checkbox" class="unchk_boxes" /> un-check all
Rather than doing that, you can just have one checkbox that does both. Thus, your jQuery will look like:
$(document).ready(function() {
$('.chk_boxes').click(function(){
$('.chk_boxes1').attr('checked',$(this).attr('checked'));
})
});
With HTML:
<input type="checkbox" class="chk_boxes" label="check all" />check all
See the working solution here http://jsfiddle.net/HBGzy/
you don't need to use the "uncheck all" checkbox :)
$('.chk_boxes').click(function(){
var chk = $(this).attr('checked')?true:false;
$('.chk_boxes1').attr('checked',chk);
});
You forgot about quotes:
$('.chk_boxes1').attr('checked','checked')
fiddle: http://jsfiddle.net/8ZHFn/
Try this
$(".chk_boxes").click(function()
{
var checked_status = this.checked;
$(".chk_boxes1").each(function()
{
this.checked = checked_status;
});
});
So, if the class name of all the checkboxes you want to affect when checking or unchecking the checkbox with class chk_boxes,is chk_boxes1 this will get all the elements and set the checked property accordingly.
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 than add the following script
<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;?>" />
i think you should use the true or false for the checkbox attribute.
<script type="text/javascript" charset="utf-8">
$('document').ready( function() {
$('.chk_boxes').click( function() {
$(':checkbox').attr('checked',true);
});
});
</script>
An advice about check all/uncheck all..
As my think after selecting check all, if user clicks any of checkbox1s, the check all checkbox should be unchecked and also without clicking check all box, if user selects all checkbox1s one by one the checkbox should be selected. So i suggest you to try this when using check all/uncheck all..
$(document).ready(function() {
$('.chk_boxes').click(function(){
$('.chk_boxes1').attr('checked',$(this).attr('checked'));
})
$('.chk_boxes1').click(function(){
if($('.chk_boxes1').length == $('.chk_boxes1:checked').length)
$('.chk_boxes').attr('checked',checked)
else
$('.chk_boxes').attr('checked',false)
})
});
I am trying to get all the id values of the selected checkboxes. When the user hits "selectAll", all the checkboxes are checked, but I just can't get their individual value. Any idea what I am doing wrong?
Here is the jQuery:
$(".selectAll").unbind("click").click(function(e){//needs work here
var bool = $(this).is(":checked"); //gets whether selected or not
var list = new Array();
$(function(){
$("input:checkbox").attr("checked", bool);
if(bool == true){
$.each((".delID :checked"),function(){
list.push( $(this).val());
alert( $(this).val());
}); }
});
}); //END of needs work area.
and here is the html:
<form name="selectDelete" class="selectDelete">
<table id="inboxTable" class="txt13" width="800px">
<tr><th align="left" style="text-decoration:underline"><input type="checkbox" name="selectAll" class="selectAll"/></th>
<th style="text-decoration:underline">To</th><td width="20px"></td>
<th style="text-decoration:underline">Subject
</th><td width="20px"></td>
<th style="text-decoration:underline">Date</th><td width="20px"></td>
<th style="text-decoration:underline">Action</th></tr>
<?php while($info=mysql_fetch_array($result)){
$id = $info['id']; ?>
echo "<tr>
<td width="20px"><input type="checkbox" name="delID" class="delID" value="'.$id.'"/></td>";
Just for anybody out there with similar problems, this is what I ended up doing to make the code work:
if(bool == true){
$(".delID").each(function(index,element){
//list.push( $(this).val());
alert(index + " " + $(this).val());
}); }
In my case, if 'bool == true', then all the checkboxes will ALWAYS be checked, so that's why using just .delID, instead of .delID :checked worked for me.
Thanks to all for the input.
You can use this code:
$(".delID:checked").each(function(){
list.push( $(this).val());
alert( $(this).val());
});
http://jsfiddle.net/ynhat/daQSM/