How do I check if a checkbox is checked with JQuery? - javascript

I am trying to allow a click function if the user has checked a checkbox on the page. Otherwise, I want to add a class to the #additional_foreign button.
I think I am close, but it doesn't seem to be working.
Here is my code:
if($('#foreign_checkbox').attr('checked')) {
$('#additional_foreign').click(function() {
alert('This click function works');
});
} else {
$('#additional_foreign').addClass('btn_disable');
}
When I check the checkbox, it doesn't allow the click function and when I uncheck the checkbox, it also doesn't add the class as it should.
What am I doing wrong?
EDIT:Here is my HTML for clarification.
<input id="foreign_checkbox" type="checkbox" />
<span id="additional_foreign">Click Me</span>

try using $('#foreign_checkbox').is(":checked") - rest of the code looks fine
If this was my code I'd do something like this to make it work:
<input id="foreign_checkbox" type="checkbox" />
<span style='display:none' id="additional_foreign">Click Me</span>
<script type="text/javascript">
$(document).ready(function() {
$("#foreign_checkbox").click(function() {
if($('#foreign_checkbox').is(':checked')) {
$('#additional_foreign').show();
} else {
$('#additional_foreign').hide();
}
});
$('#additional_foreign').click(function() {
alert('This click function works');
});
});
</script>

The problem is that the code doesn't run continually, only when the page loads, when all the boxes are unchecked. You need an action that fires when the box is checked or unchecked, which adds an action or a class to the button:
$('#foreign_checkbox').change(function(){
if (this.checked){
$('#additional_foreign').click(function() {
doSomething();
});
} else {
$('#additional_foreign').addClass('btn_disable');
}
});

Related

.is(":checked") doesn't work in jQuery

I'm new to jQuery and I need to check if the checkbox is checked. In other posts I saw that I need to use .is(":checked") to solve it, but somehow it doesn't work.
$('.neutral').on('click', function() {
var checkbox = $(this);
if (checkbox.is(":checked")) {
console.log('checked');
} else {
console.log('unchecked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="neutral" />
In this code I have 2 problems and I don't know how to solve it.
When I'm using console.log('checked') outside of the if statement (after checkbox variable) and I click on the checkbox one time, console prints the result 2 times.
I don't know why this if statement doesn't working.
Thank you for your time and help.
checked happens after the change event,just replace click with change.
$('.neutral').on('change', function() {
var checkbox = $(this);
if (checkbox.is(":checked")) {
console.log('checked');
} else {
console.log('unchecked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="neutral" />
I have seen your code, I think you should try
$(document).on("click",".neutral",function() {
// Write code here
});
Instead of your code, Replace this code to as i written
$('.neutral').on('click', function() {
// Code here
});
For more undesirability see here
$(document).ready(function() {
// This WILL work because we are listening on the 'document',
// for a click on an element with an ID of #test-element
$(document).on("click","#test-element",function() {
alert("click bound to document listening for #test-element");
});
// This will NOT work because there is no '#test-element' ... yet
$("#test-element").on("click",function() {
alert("click bound directly to #test-element");
});
// Create the dynamic element '#test-element'
$('body').append('<div id="test-element">Click mee</div>');
});
Visit these link that may help you more for your implementation
Statck over flow link
jsFiddle Link

checkbox toggle change without any user interaction

I call a function in jquery for a checkbox toggle change. It works as expected.
Now I want to change this when the box is checked show some tables else hide.
But I don't know how to modify my function.. [1]
How can I modify this ?
[1]
HTML
<label class="checkbox"> <input type="checkbox" id="toggleSequence" name="sequence_check" id="sequence_check">
Jquery
$("#toggleSequence").change(function(e){
if($(this).is(":checked")){
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
});
JS Fiddle
$('#toggleSequence').parents('table').next().hide(); // first you need to hide it use can also use css for this
$("#toggleSequence").change(function (e) {
if ($(this).is(":checked")) {
alert();
$(this).parents('table').next().show();
} else {
$(this).parents('table').next().hide();
}
});

Make div appear (or disappear) on checkbox status

I have this jQuery code:
$(document).ready(function(){
$('.checkdisplay').change(function(){
if(this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
This works great only if I check the .checkdisplay radio button: the div appears, but after, if i uncheck .checkdisplay radio button, the div .todisplay doesn't disappear.
Where i'm wrong? :(
EDIT:
demo: http://jsfiddle.net/Mse2L/
You need to test all the radios and only show on the one with the correct class
You could have used ID too
Notice I use .on("click" since change needs a blur in some browsers
Live Demo
$(function(){
$("input[name='roomdoor']").on("click",function(){
if ($(this).hasClass("checkdisplay") && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
$(document).ready(function () {
$('.radio').change(function () {
if ($(this).hasClass('checkdisplay') && this.checked) $('.todisplay').fadeIn('slow');
else $('.todisplay').fadeOut('slow');
});
});
Demo
The problem is, you can't uncheck a radiobutton.
Problem is your radio button, you should use checkbox like,
Once a radio button having class checkdisplay is checked then it will be checked, how it can be unchecked
<input type='checkbox' class='checkdisplay' />
<div class='todisplay'>test</div>
Demo
Updated, try this like,
$(document).ready(function(){
$('.radio').change(function(){// add onchange on radio class
// check the radio has checkdisplay class or not
if($(this).hasClass('checkdisplay') && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
Working demo
$('.checkdisplay').click(function() {
if( $(this).is(':checked')) {
$(".todisplay").fadeIn('slow');
} else {
$(".todisplay").fadeOut('slow');
}
});

Radio Button Check

I am trying to check if a radio box is checked using JavaScript, but I can't seem to figure it out properly.
This is the HTML code:
<input type="radio" name="status" id="employed_yes" value="yes">
<input type="radio" name="status" id="employed_no" value="no">
I have tried using jQuery as follows:
$(document).ready(function() {
if($('#employed_yes').is(':checked')) {
// do something
}
});
Also, I tried using pure Javascript by getting the element and check its 'checked' attribute, but it didn't work.
I look forward to your insight!
Thank you!
Use onchange
$('input[type="radio"]').on('change',function(){
if($('#employed_yes').is(':checked')) {
alert("yes");
}
});
DEMO
Try to check using name of the radio buttons like
if($('input[name="status"]').val() != "") {
// do something
} else {
alert("Select an Status");
}
Your solution doesn't work because when the page loads the checkbox's default state is unchecked, which is when the jQuery code runs.
You need to listen for the change event on the checkbox like so:
$(document).ready(function() {
$("#employed_yes").change(function() {
if(this.checked) {
document.write("checked");
}
});
});
Demo: http://jsfiddle.net/7CduY/
Try this. This will alert Hi on document ready if the any radio button is checked. If you want to check on specific event then you can bind on any event to check same.
$(document).ready(function() {
if($('input[type=radio]').is(':checked')) {
alert("Hi");
}
});
if($('input:radio:checked').text("yes") {
// do something
}
Got the idea from the jQuery forum. http://forum.jquery.com/topic/how-to-check-whether-all-radio-buttons-have-been-been-selected
Dude, I think you Wanted, whether radio button is checked or not, this what i understand from your question
If so here it is
$(document).ready(function() {
$('input[type="radio"]').on('change',function(){
if($('[name=status]:checked').length) {
alert("checked");
}
});
});
FIDDLE DEMO
Pure JS:
<input type = "button" value = "What?" name = "wic" onclick = "whatischecked(this.name);" />
Event onClick:
function whatischecked(name) {
var
emp = document.getElementById("employed_yes").checked
nonemp = document.getElementById("employed_no").checked
if (emp) {
alert("Employed");
};
if (nonemp) {
alert("Non-Employed");
};
if ((emp == false) & (nonemp == false))
{
alert("nothing checked")
};
}

opposite of click function

what is the opposite function if the user unclicks a checkbox?
this is my script if the user clicks the checkbox
<script>
$(document).ready(function() {
$("input[name$='INopt']").click(function() {
$("#OUTsrvOtr").prop('class','text')
});
});
</script>
<input id="INsrv" name="INopt" type="checkbox" value="1" />1<br>
but i want this to run if the user unclicks/unchecks the checkbox
$("#OUTsrvOtr").prop('class','validate[required] text-input text')
Inside click method you can check if if checkbox is checked or unchecked
<script>
$(document).ready(function() {
$("input[name$='INopt']").click(function() {
if(this.checked){
$("#OUTsrvOtr").prop('class','text');
}
else{
$("#OUTsrvOtr").prop('class','validate[required] text-input text');
}
});
});
</script>
It's still click, only you need to check this.checked - if it's true then the box has been checked, otherwise (for unchecking it) it's false.

Categories