Get radio button by name in a loop using jQuery - javascript

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.

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

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

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

Hide a div based on a select input box

I was helped with some code here. I tweaked it to try and hide a whole div instead of an element. It was only a small tweak but I seem to have done something to stop it working.
HTML
<input type="text" name="text-708" value="" class="wpcf7-validates-as-required" size="40">
<div id="added_fields">
<select name="menu-168" class="wpcf7-validates-as-required">
<option value="Residential">Residential</option>
<option value="Commercial">Commercial</option>
</select>
</div>
JS
if ($("select[name='menu-168']").val() == "Commercial") {
$("#added_fields").addClass("hidden");
}​
Would someone be kind enough to tell me where I have gone wrong?
You need to do the check of the select value when it changes.
I want to hide the input box not the select box im afraid
In that case you need to change the #added_fields selector. Try this:
$("select[name='menu-168']").change(function() {
if ($(this).val() == "Commercial") {
$('#added_fields').addClass("hidden");
}
else {
$('#added_fields').removeClass("hidden")
}
});
Example fiddle
You did not write the code on change event of select and your selected value at load is not commercial so your statement under if does not execute.
Live Demo
$("select[name='menu-168']").change(function() {
if ($("select[name='menu-168']").val() == "Commercial") {
$("input[name=text-708]").addClass("hidden");
}
else
$("input[name=text-708]").removeClass("hidden");
});​
Try changing the following line
$("#added_fields").addClass("hidden");
to
$("#added_fields").hide();
Try this :
$("select[name='menu-168']").change(function() {
if ( $(this).val() == "Commercial") {
$("#added_fields").hide();
}
});​
try
$("#added_fields").hide();
you can find more information here: http://api.jquery.com/hide/
Updated: If you want to refer to the change event of your select you have to either fire your function in the onselectedindexchanged attribute of your select or add a change event on it via jQuery:
$("select[name='menu-168']").change(function() {
if ($(this).val() == "Commercial") {
$("#added_fields").hide();
}
});
more info about change: http://api.jquery.com/change/
Make sure you have the option:selected property in the change event of the select list
$("select[name='menu-168']").bind("change",function(e){
if ($("select[name='menu-168'] option:selected").val() == "Commercial") {
$("#added_fields").hide();
}
});
hay yomiss to call the change event of the select box.
check this fiddle.
http://jsfiddle.net/K9zGP/44/
$("select[name='menu-168']").change(function(){
alert($(this).val());
if ($(this).val() == "Commercial") {
$("#added_fields").addClass("hidden");
}
});
Try this:
$("select").change(function(){
if($("select option:selected").val() == "Commercial")
$("input[name=text-708]").hide();
else
$("input[name=text-708]").show();
});
​
​ DEMO
You have to "attach" to a event "hide".
So you can do this with click() (or change()) event like in this fiddle.
Your code is only executing once, on $(document).ready();. Wrap it in a .change() event handler.
$("select[name='menu-168']").change(function(e) {
if ($(this).val() == "Commercial") {
$("#added_fields").addClass("hidden");
}
});​
Updated fiddle: http://jsfiddle.net/K9zGP/36/
UPDATE:
To make the text-input reappear in jsfiddle.net/K9zGP/46, use .toggleClass() instead:
$("select[name='menu-168']").change(function(e) {
var isCommercial = $(this).val() == "Commercial";
$("#added_fields").toggleClass("hidden", isCommercial);
});​
YAF: http://jsfiddle.net/K9zGP/71/

Check Checkbox Disabled (Jquery)

The purpose is to;
If checkbox is disabled, do nothing.
If checkbox is enabled and checked, set the style of a button.
Here is what I've got so far;
$(document).ready(function (e) {
$(".checkbox").live("click", function () {
if ($(this).hasAttribute('disabled')) {
return false;
}
var isAnyChecked;
$("input[type=checkbox]").each(function () {
var checkedValue = $(this).attr("checked");
if (checkedValue == "checked") {
isAnyChecked = true;
}
});
if (isAnyChecked) {
$("#<%= btnConfirm.ClientID %>").css("display", "block");
} else {
$("#<%= btnConfirm.ClientID %>").css("display", "none");
}
}); });
I've tried .is(':disabled'), .hasAttr(), .prop() and .attr(). Any help would be greatly appreciated.
You have to check whether the disabled attribute is true: .attr('disabled').
Or, better, use .is(':disabled').---
EDIT: So it seems that .attr is now deprecated for this use (see http://api.jquery.com/attr/)
The preferred way is:
$('#myCheckbox').prop('disabled')
It has to be noted that this still work as of today:
$('#myCheckbox').is(':disabled')
Try it here: https://jsfiddle.net/Robloche/phaqfrmj/
Also you can try use this:
$("#myCheckBox").is('[disabled]');
Works for me to determine if an element is disabled.
Possible others solutions (.disabled, .is(':disabled'), .attr('disabled'), .prop('disabled')).
for me, this works like a charm to disable:
$("#myCheckBox").prop("disabled", true)
to enable:
$("#myCheckBox").prop("disabled", false)

Categories