Radio Button Check - javascript

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")
};
}

Related

Checkbox fire a function if checked and a different function if not checked

Hi i have got a checkbox and when i click it and check the box a function runs, which works just how i want it to.. now i want to run a DIFFERENT function if it is checked off but it is just running the same function everytime.
<input type="checkbox" class="no-custom" onclick="CheckBox()">
function CheckBox() {
$("#emailMain").css({"display": "none"});
$("#emailSame").css({"display": "inline"});
var Mainemail = Customer().email['#text']();
Contact().email = Mainemail;
EmailHolder(Mainemail);
}
Any ideas in the best way to sort this?
Firstly, if you've included jQuery in your page you should use it to attach your events as its a better separation of concerns. You can then use the checked property of the element to determine which function to call:
<input type="checkbox" class="no-custom" />
$('.no-custom').change(function() {
if (this.checked) {
// do something...
}
else {
// do something else...
}
});
Add an ID to the checkbox:
<input type="checkbox" id="the-checkbox" class="no-custom" onclick="CheckBox()">
Then add an event listener for when it changes:
$(function() {
$('#the-checkbox').change(function() {
if($(this).is(':checked')) {
oneFunction();
}
else {
anotherFunction();
}
});
function oneFunction() {
}
function anotherFunction() {
}
});
You can easily check if the checkbox is checked using jQuery is.
<input type="checkbox" class="no-custom" onclick="CheckBox(this)">
function CheckBox(cb) {
if ($(cb).is(":checked")) {
alert("Checked");
CheckedFunction();
} else {
alert("Unchecked");
UncheckedFunction
}
}

jquery not registering one of my radio buttons as selected

I have a radio button selection that jquery is able to loop through them and read the values for each one just fine, but jquery can only detect when one of them has been selected. When selecting the other one, jquery just ignores it and tells me none have been selected.
jquery:
$('[name="banner_type"]').each(function() {
console.log($(this).val());
if($(this).is(':checked')) {
valid = $(this).val();
return valid;
} else if(!$(this).is(':checked')) {
valid = false;
}
});
html:
<input type="radio" id="upload" name="banner_type" value="upload" />
<input type="radio" id="html" name="banner_type" value="html" />
"upload" is being ignored by jquery, "html" is not
Im doing it this way:
valid=false;
$('[name="banner_type"]').each(function() {
if($(this).is(':checked'))
valid = $(this).val();
});
So each time You check for radio being checked, valid value is renewed.
here's fiddle for You. Function "check" checks validity, returning false if none is selected.
http://jsfiddle.net/CLaDG/
The else part is setting value for valid but not returning it. Also the value is always false for second radio button. Try this:
$('[name="banner_type"]').each(function() {
console.log($(this).val());
if($(this).is(':checked')) {
valid = $(this).val();
return valid;
} else if(!$(this).is(':checked')) {
valid = $(this).val();
return valid;
}
});
This can be written shorter and better but right now I am just fixing the issue I see.
not sure which version of jQuery you are on, but try using jQuery.prop as well as delegated event on the container might be cleaner, such as:
$('.your-radios-container').on('change','[name="banner_type"]',function(){
valid = $(this).prop('checked');
});
I have forked your fiddle to show you how it could work:
http://jsfiddle.net/AcMBR/2/

Working With checkboxes in the web pages

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

Get radio button by name in a loop using jQuery

I'm using jquery 1.4.1 and while I plan to upgrade soon, I need to resolve the below issue. I need to loop over all the radio buttons on my html page and then do some logic for a couple of radio button's based on their name. Below was my attempt but it's not working, any ideas?
jQuery('input:radio').each(function() {
if(jQuery(this).name('radioOneName')) {
alert("radioOneName")
} else {
alert("not radioOneName")
}
});
Try this jQuery(this).attr('name') === 'radioOneName'. Link to docs.
Try this :)
$(document).ready(function () {
$(':radio').each(function () {
var myval = $(this).val();
if (myval == "button1")
{
alert("first");
}
else
{
alert("second");
}
});
});
You should be using
$(this).attr("name");
Glad I could help.
You can try this:
<input type="radio" id="abc" name="myradioname"/>
and in javascript using this:
$('input[name="myradioname"]').each(function(){
// do something...
})
Basically, this syntax queries the document for the <input> tag having the specified name.

Need to enable/disable a button on click of checkbox

I am trying to disable a order button when the page loads and enable it when one checks the Terms and condition checkbox. I have it working where the order button is disabled when the page loads but on the click of checkbox the button doesnt get enabled. Here is my code. Can anyone help me identify the problem
<input type="checkbox" id="checkbox1" name="checkbox1" class="required" />Please read the Terms and Conditions
Jquery Code
var j$ = jQuery.noConflict();
j$(document).ready(function(){
alert("Hi");
if(j$('input[name="checkbox1"]').not(":checked"))
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
j$('#checkbox1').change(function(){
if(j$('input[name="checkbox1"]').is(":checked")
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
}
});
Thanks
Prady
The code you provided had some missing ( and {, here is an updated version with some changes to handle the checkbox state properly:
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var checkbox1 = j$('#checkbox1');
var order = j$('input[name="Order"]');
var verifyChecked = function() {
if (checkbox1.is(":checked") === false) {
order.attr('disabled', 'disabled');
} else {
order.removeAttr('disabled');
}
};
verifyChecked();
checkbox1.change(verifyChecked);
});
Here is a jsfiddle with it working:
http://jsfiddle.net/7uRf6/4/
You have missed a closing parenthesis
if(j$('input[name="checkbox1"]').is(":checked")
should be
if(j$('input[name="checkbox1"]').is(":checked"))
Also you can use an id selector instead of this attribue selector.
And if you want to enable the button when the checkbox is checked you have to
if(!j$('input[name="checkbox1"]').is(":checked"))
in your change event,
if(j$('input[name="checkbox1"]').is(":checked")
it should be
if(j$('input[name="checkbox1"]').not(":checked")
I suggest you to create a function to check it.
var j$ = jQuery.noConflict();
j$(document).ready(function(){
ToggleButton();
j$('#checkbox1').change(ToggleButton);
});
function ToggleButton()
{
if(j$('input[name="checkbox1"]').not(":checked"))
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
}
<script src="jquery.js"></script>
<script>
$(document).ready(function (){
$('#ch').click(
function (){
if($(this).is(':checked')){
$('#bt').attr('disabled','disabled');
}
else {
// remove
$('#bt').removeAttr('disabled');
}
}
)
})
</script>
<input type="button" value="button" id="bt"/>
<input type="checkbox" id="ch"/>

Categories