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
}
});
});
<?php
while($query=mysql_fetch_assoc($select)){
?>
<tr><td><input type="checkbox" name="checkBoxMail" id="checkBoxMail"
value="<?php echo $query['id']; ?>"
userid="<?php echo $query['suserid']; ?>"></td>
</tr>
<?php
}
?>
This code created multiple checkbox in view page. First check only return value after that next check box click is not working
$('#checkBoxMail').click(function(){
alert("alert");
});
There would be multiple checkboxes with same id which is wrong. Try with class.
<input type="checkbox" name="checkBoxMail" class="checkBoxMail"
value="<?php echo $query['id']; ?>"
userid="<?php echo $query['suserid']; ?>">
And
$('.checkBoxMail').click(function(){
alert("alert");
});
And if you want to access the value or attribute then simple do -
$(this).val();
$(this).attr('userid');
Three examples of how you can do this by ID:
Remember if you're creating multiple checkbox fields don't set the same ID, make a different ID for each one or you can select the checkbox by class by changing the # to . as you can use the classname multiple times.
The ID has to be unique
$(document).ready(function()
{
// By ID - ID has to be unique
$('#checkBoxMail').on("click", function()
{
alert("alert");
});
$('#checkBoxMail2').click(function()
{
alert("alert2");
});
$(document).on("click", "#checkBoxMail3", function()
{
alert("alert3");
});
// By classname
$('.checkBoxMail5').on("click", function()
{
alert("alert");
});
$('.checkBoxMail5').click(function()
{
alert("alert2");
});
$(document).on("click", ".checkBoxMail5", function()
{
alert("alert3");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Divs with unique ID
<hr>
<div id="checkBoxMail">CLICK ME</div>
<div id="checkBoxMail2">CLICK ME</div>
<div id="checkBoxMail3">CLICK ME</div>
<br>
Div with classname
<hr>
<div class="checkBoxMail5">CLICK ME</div>
You are using same id for all checkbox creted, either use unique id for each checkbox or use class. See below code, where i have used class
<?php
while($query=mysql_fetch_assoc($select)){
?>
<tr><td><input type="checkbox" name="checkBoxMail" class="checkBoxMail"
value="<?php echo $query['id']; ?>"
userid="<?php echo $query['suserid']; ?>"></td>
</tr>
<?php
}
?>
jQuery:
$(document).on('click','.checkBoxMail', function(){
alert("alert");
});
Give class to all and Read about delegated event handlers , that would help: http://api.jquery.com/on/
$(document).on("click",".classname",function(event){
alert("hi");
});
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers
$(document).ready(function () {
$('#checkBoxMail').click(function () {
alert("click event fired")});
});
<input type="checkbox" name="checkBoxMail" id="checkBoxMail" />
$('#checkBoxMail').is(':checked'){
alert("alert");
});
Try this. Enjoy!
I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery.
For example, if the age checkbox is checked, then I need to show a textbox to enter age, else hide the textbox.
But the following code returns false by default:
if ($('#isAgeSelected').attr('checked')) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">
Age is selected
</div>
How do I successfully query the checked property?
How do I successfully query the checked property?
The checked property of a checkbox DOM element will give you the checked state of the element.
Given your existing code, you could therefore do this:
if(document.getElementById('isAgeSelected').checked) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
However, there's a much prettier way to do this, using toggle:
$('#isAgeSelected').click(function() {
$("#txtAge").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>
Use jQuery's is() function:
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show(); // checked
else
$("#txtAge").hide(); // unchecked
Using jQuery > 1.6
<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />
// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true
Using the new property method:
if($('#checkMeOut').prop('checked')) {
// something when checked
} else {
// something else when not
}
jQuery 1.6+
$('#isAgeSelected').prop('checked')
jQuery 1.5 and below
$('#isAgeSelected').attr('checked')
Any version of jQuery
// Assuming an event handler on a checkbox
if (this.checked)
All credit goes to Xian.
I am using this and this is working absolutely fine:
$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");
Note: If the checkbox is checked it will return true otherwise undefined, so better check for the "TRUE" value.
Use:
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned
$("#planned_checked").change(function() {
if($(this).prop('checked')) {
alert("Checked Box Selected");
} else {
alert("Checked Box deselect");
}
});
$("#planned_checked").change(function() {
if($(this).prop('checked')) {
alert("Checked Box Selected");
} else {
alert("Checked Box deselect");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned
Since jQuery 1.6, the behavior of jQuery.attr() has changed and users are encouraged not to use it to retrieve an element's checked state. Instead, you should use jQuery.prop():
$("#txtAge").toggle(
$("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
// Return value changes with checkbox state
);
Two other possibilities are:
$("#txtAge").get(0).checked
$("#txtAge").is(":checked")
This worked for me:
$get("isAgeSelected ").checked == true
Where isAgeSelected is the id of the control.
Also, #karim79's answer works fine. I am not sure what I missed at the time I tested it.
Note, this is answer uses Microsoft Ajax, not jQuery
If you are using an updated version of jquery, you must go for .prop method to resolve your issue:
$('#isAgeSelected').prop('checked') will return true if checked and false if unchecked. I confirmed it and I came across this issue earlier. $('#isAgeSelected').attr('checked') and $('#isAgeSelected').is('checked') is returning undefined which is not a worthy answer for the situation. So do as given below.
if($('#isAgeSelected').prop('checked')) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
Use:
<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad
$('input#abc').click(function(){
if($(this).is(':checked'))
{
var checkedOne=$(this).val()
alert(checkedOne);
// Do some other action
}
})
This can help if you want that the required action has to be done only when you check the box not at the time you remove the check.
You can try the change event of checkbox to track the :checked state change.
$("#isAgeSelected").on('change', function() {
if ($("#isAgeSelected").is(':checked'))
alert("checked");
else {
alert("unchecked");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected" />
<div id="txtAge" style="display:none">
Age is selected
</div>
Using the Click event handler for the checkbox property is unreliable, as the checked property can change during the execution of the event handler itself!
Ideally, you'd want to put your code into a change event handler such as it is fired every time the value of the check box is changed (independent of how it's done so).
$('#isAgeSelected').bind('change', function () {
if ($(this).is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
});
I ran in to the exact same issue. I have an ASP.NET checkbox
<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />
In the jQuery code I used the following selector to check if the checkbox was checked or not, and it seems to work like a charm.
if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }
I'm sure you can also use the ID instead of the CssClass,
if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }
I hope this helps you.
I believe you could do this:
if ($('#isAgeSelected :checked').size() > 0)
{
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
I decided to post an answer on how to do that exact same thing without jQuery. Just because I'm a rebel.
var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');
// Just because of IE <333
ageCheckbox.onchange = function() {
// Check if the checkbox is checked, and show/hide the text field.
ageInput.hidden = this.checked ? false : true;
};
First you get both elements by their ID. Then you assign the checkboxe's onchange event a function that checks whether the checkbox got checked and sets the hidden property of the age text field appropriately. In that example using the ternary operator.
Here is a fiddle for you to test it.
Addendum
If cross-browser compatibility is an issue then I propose to set the CSS display property to none and inline.
elem.style.display = this.checked ? 'inline' : 'none';
Slower but cross-browser compatible.
This code will help you
$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});
This works for me:
/* isAgeSelected being id for checkbox */
$("#isAgeSelected").click(function(){
$(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
There are many ways to check if a checkbox is checked or not:
Way to check using jQuery
if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))
Check example or also document:
http://api.jquery.com/attr/
http://api.jquery.com/prop/
This is some different method to do the same thing:
$(document).ready(function (){
$('#isAgeSelected').click(function() {
// $("#txtAge").toggle(this.checked);
// Using a pure CSS selector
if ($(this.checked)) {
alert('on check 1');
};
// Using jQuery's is() method
if ($(this).is(':checked')) {
alert('on checked 2');
};
// // Using jQuery's filter() method
if ($(this).filter(':checked')) {
alert('on checked 3');
};
});
});
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>
Use this:
if ($('input[name="salary_in.Basic"]:checked').length > 0)
The length is greater than zero if the checkbox is checked.
My way of doing this is:
if ( $("#checkbox:checked").length ) {
alert("checkbox is checked");
} else {
alert("checkbox is not checked");
}
$(selector).attr('checked') !== undefined
This returns true if the input is checked and false if it is not.
You can use:
if(document.getElementById('isAgeSelected').checked)
$("#txtAge").show();
else
$("#txtAge").hide();
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
Both of them should work.
$(document).ready(function() {
$('#agecheckbox').click(function() {
if($(this).is(":checked"))
{
$('#agetextbox').show();
} else {
$('#agetextbox').hide();
}
});
});
1) If your HTML markup is:
<input type="checkbox" />
attr used:
$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set
If prop is used:
$(element).prop("checked"); // Will give you false whether or not initial value is set
2) If your HTML markup is:
<input type="checkbox" checked="checked" />// May be like this also checked="true"
attr used:
$(element).attr("checked") // Will return checked whether it is checked="true"
Prop used:
$(element).prop("checked") // Will return true whether checked="checked"
This example is for button.
Try the following:
<input type="button" class="check" id="checkall" value="Check All" /> <input type="button" id="remove" value="Delete" /> <br/>
<input type="checkbox" class="cb-element" value="1" /> Checkbox 1 <br/>
<input type="checkbox" class="cb-element" value="2" /> Checkbox 2 <br/>
<input type="checkbox" class="cb-element" value="3" /> Checkbox 3 <br/>
$('#remove').attr('disabled', 'disabled');
$(document).ready(function() {
$('.cb-element').click(function() {
if($(this).prop('checked'))
{
$('#remove').attr('disabled', false);
}
else
{
$('#remove').attr('disabled', true);
}
});
$('.check:button').click(function()
{
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).data('checked', checked);
if(checked == true)
{
$(this).val('Uncheck All');
$('#remove').attr('disabled', false);
}
else if(checked == false)
{
$(this).val('Check All');
$('#remove').attr('disabled', true);
}
});
});
The top answer didn't do it for me. This did though:
<script type="text/javascript">
$(document).ready(function(){
$("#li_13").click(function(){
if($("#agree").attr('checked')){
$("#saveForm").fadeIn();
}
else
{
$("#saveForm").fadeOut();
}
});
});
</script>
Basically when the element #li_13 is clicked, it checks if the element # agree (which is the checkbox) is checked by using the .attr('checked') function. If it is then fadeIn the #saveForm element, and if not fadeOut the saveForm element.
To act on a checkbox being checked or unchecked on click.
$('#customCheck1').click(function() {
if (this.checked) {
console.log('checked');
} else {
console.log('un-checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="customCheck1">
EDIT: Not a nice programming expression if (boolean == true) though .checked property might return other type variables as well..
It is better to use .prop("checked") instead. It returns true and false only.
I am using this:
<input type="checkbox" id="isAgeSelected" value="1" /> <br/>
<input type="textbox" id="txtAge" />
$("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
Though you have proposed a JavaScript solution for your problem (displaying a textbox when a checkbox is checked), this problem could be solved just by css. With this approach, your form works for users who have disabled JavaScript.
Assuming that you have the following HTML:
<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />
You can use the following CSS to achieve the desired functionality:
#show_textbox:not(:checked) + input[type=text] {display:none;}
For other scenarios, you may think of appropriate CSS selectors.
Here is a Fiddle to demonstrate this approach.
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);
});
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