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
Related
I have a check box called, On click of that check box I am calling a function below.
$('#checkbox-id').on('click', function(){
alert("clicked");
}).each(function(){this.checked = ace.settings.is('main-container', 'fixed')})
Same method I want to call from different function. First I need to check weather checkbox is checked or not after that I need to call function once checkbox is check for this I am using this code.
$(document).ready(function(){
if(document.getElementById('checkbox-id').checked){
$('#checkbox-id').click() // getting called but also unchecking checkbox it should not uncheck
}
});
This is working but it also unchecking checkbox which I don't want.
So How can I call that function without unchecking checkbox.
Here is JSFIDDLE to reproduce.
You can check If Check Box Is Checked Like :
$(document.body).on('change', '#chkID', function () {
if (this.checked) {
// CHECK BOX IS CHECKED
}
else {
// CHECK BOX IS NOT CHECKED
}
});
DEMO
Try declaring your function instead of using an anonymous function:
function handle_click() {
alert("clicked");
}
$('#checkbox-id').on('click', handle_click);
$(document).ready(function(){
if(document.getElementById('checkbox-id').checked){
handle_click();
}
});
you can use this ,this will fire the alert once the checkbox become checked
$('#checkbox-id').on('click', function () {
if ($(this).prop("checked") == true) {
alert("clicked");
}
});
Try trigger() instead:
$('#checkbox-id').trigger('click');
Only workaround not proper solution
$(document).ready(function(){
if(document.getElementById('checkbox-id').checked) {
$('#checkbox-id').click() // getting called but also unchecking checkbox should not uncheck
$('#checkbox-id').prop('checked', true);
}
});
I have group of checkboxes and that are compulsory to be applied but the situation is user can be able to check only one check box at a time. So, for this I have implemented something like this with the help of internet. No doubt it works fine when there are no checkbox checked by default. But suppose, one of the checkbox is checked true when page loads, then this does not works unitl I click on checkbox twice.
Here is what I am using::
So , Assuming I have set of 5 checkboxes, I set same class name for all the checkboxes and then
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox" class="myclass" onclick="Checkme(this.className);"/>
In View page I have declared::
function Checkme(class_Name) {
Check_OR_Uncheck(class_Name);
}
In Common js::
function Check_OR_Uncheck(class_Name) {
$("." + class_Name).click(function () {
if ($(this)[0].checked) {
$("." + class_Name).each(function () {
$(this)[0].checked = false;
});
$(this)[0].checked = true;
}
else {
$(this)[0].checked = false;
}
});
}
Please Help me to achieve this..
Keep your code in the document ready event. This will register the click event for "myclass".
$(".myclass").click(function () {
if ($(this)[0].checked) {
$(".myclass").each(function () {
$(this)[0].checked = false;
});
$(this)[0].checked = true;
} else {
$(this)[0].checked = false;
}
});
jsfiddle
You could use document ready handler and call method:
jsFiddle
$(function(){
$(':checkbox:checked').each(function(){
Checkme(this.className);
});
});
Try this
$(function(){
$('.myclass').click(function(){
var s=$(this).prop('checked');
if(s==true)
{
$('.myclass').prop('checked',false)
$(this).prop('checked',true)
}
});
});
Or
You simply can use
if(s==true)
{
$(this).siblings().prop('checked',false);
}
FIDDLE
Try this
$(function(){
$('input:checkbox').prop('checked', false)
$('input:checkbox').click(function(){
if($(this).is(':checked')){
$('input:checkbox').not(this).prop('checked', false);
}
});
})
Instead of implementing a group of check boxes that behave like a group of radio buttons, I suggest implementing a group of radio buttons that look like a group of check boxes:
input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}
This approach simplifies your implementation; you have two one-line CSS rules instead of a JS event handler function, event binding (on both document ready and the HTML element itself), not to mention a possible dependency on jQuery (if you choose to use it).
The catch to this approach is that it requires CSS3 support. For more info, check out this SO answer: https://stackoverflow.com/a/279510/2503516
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")
};
}
I have the following jQuery code:
<script> function hideMenteeQuestions() {
$("#menteeapp").hide();
$("textarea[name='short_term_goals']").rules("remove", "required");
$("textarea[name='long_term_goals']").rules("remove", "required");
}
function showMenteeQuestions() {
$("#menteeapp").show();
$("textarea[name='short_term_goals']").rules("add", {
required: true
});
$("textarea[name='long_term_goals']").rules("add", {
required: true
});
}
function hideMentorQuestions() {
$("#mentorapp").hide();
$("input[name='mentees']").rules("remove", "required");
}
function showMentorQuestions() {
$("#mentorapp").show();
$("input[name='mentees']").rules("add", {
required: true
});
}
</script>
<script>
$(document).ready(function(){
$("#mentee").change(function(){
if($(this).is(':checked')){
showMenteeQuestions();
}else{
hideMenteeQuestions();
}
});
$("#mentor").change(function(){
if($(this).is(':checked')){
showMentorQuestions();
}else{
hideMentorQuestions();
}
});
$('#mentee').change();
$('#mentor').change();
});
</script >
Also, here's the HTML for my checkboxes:
<input type="checkbox" name="type[]" id="mentor" value="mentor"><span class="checkbox">Mentor</span>
<input type="checkbox" name="type[]" id="mentee" value="mentee"><span class="checkbox">Mentee</span>
It's supposed to hide certain divs based on the checkbox you're selecting. It works when you click the checkboxes. However, I also want to trigger the change functions on page load. For some reason, it's only calling the first change function, which in this case is for #mentee. If I change the order, then the other one works. It never gets into the second change() call.
Any ideas?
Your description suggests that you have not properly wrapped your Javascript into a document.ready() function, i.e.
$(document).ready(function() {
// your code here
});
I expect what's happening is that one of your functions is throwing an exception because the DOM isn't yet properly ready.
Even if you have got a document.ready handler, I think the stuff about exceptions is still probably true - some condition is failing in both functions, but only on first load.
I would create a function that determines which box is checked and hides the div's accordingly. Then you can use that function as a callback for the change event as well as on load. for example:
$(document).ready(function(){
toggleDivs = function () {
if($("#mentor").is(':checked')){
hideMentorQuestions();
showMenteeQuestions();
}else if($("#mentee").is(':checked')){
hideMenteeQuestions();
showMentorQuestions();
}
}
$('#mentor, #mentee').change(toggleDivs);
toggleDivs();
});
It also seems to me like you want either-or in which case I would recommend using radio buttons rather than checkboxes
Got it to work by changing the hideMenteeQuestions() and showMenteeQuestions() functions:
function hideMenteeQuestions(){
$("#menteeapp").hide();
$("textarea[name='short_term_goals']").removeClass('required');
$("textarea[name='long_term_goals']").removeClass('required');
}
function showMenteeQuestions(){
$("#menteeapp").show();
$("textarea[name='short_term_goals']").removeClass('required').addClass('required');
$("textarea[name='long_term_goals']").removeClass('required').addClass('required');
}
I use a jQuery function to show certain hidden text fields once you select something from a select box.
This works fine for select boxes but I can't get it to work for a checkbox.
Here is the stripped code I tried (in a nutshell) but it's not working: http://jsbin.com/uwane3/2/
Thanks for your help, I rarely use JS so my knowledge is small.
I have found 2 errors in your code:
your Checkbox has no value so you cant get more than an empty result form ".val()"
you have not bind a eventhandler to the checkbox.
http://jsbin.com/uwane3/3
$('#cf3_field_9').live('click', function(e){
if (e.target == $('#cf3_field_9')[0] && e.target.checked) {
alert('The following line could only work if the checkbox have a value.');
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
You have no events registered to your checkbox.
Register a click, or change handler like this:
$('#cf3_field_9').click(function(){
if ($(this).attr("checked")) {
$.viewMapcf3_field_9[$(this).val()].show();
} else {
$.each($.viewMapcf3_field_9, function() { this.hide(); });
}
});
http://api.jquery.com/category/events/