javascript get value of radio button not selected - javascript

Perhaps a stupid question, perhaps because im a javascript rookie but lets say I have multiple groups of radio buttons with 2 or 3 radio buttons per group.
I can easily get rad1(if selected) by
if (radios[i].checked) {
myradiovalue=radios[i].value
}
But now how will I get value of rad2 which is not clicked

if (!radios[i].checked) {
myradiovalue=radios[i].value
}

Determine if the radio button's checked attribute is false and then set the value
if (radios[i].checked == false) {
myradiovalue = radios[i].value
}

Related

Exclusive input checkboxes - enable to uncheck by clicking on current checked input

I did an exclusive menu of 2 input checkboxes : each input checkbox corresponds to a different case : (Player Vs Computer) and (Player1 Vs Player2) and each case is associated to 2 buttons (which work as I want).
My issue is that I would like to add a functionality, i.e enable to uncheck the current checked box by clicking on the current checkbox (this one which is already checked).
For the moment, I have to click directly on the other input checkbox to uncheck the current one; I would like to get the both functionalities.
Here's the current code which handles these 2 exclusive input checkbox :
// Check input checked
checkBoxState = $('#'+gameType+'').find('.game').prop('checked');
// Set oneButtonClicked to no for restore
$('#formGame').prop('oneButtonClicked', 'no');
// Handling input.game
$('#'+gameType+'').find('.game').prop('checked', !checkBoxState);
//$('#'+gameType+'').siblings().find('.game').prop('checked', checkBoxState);
// Set pointer-events to all for formGame
$('#formGame').css('pointer-events', 'all');
// Handling button.btn
$('#'+gameType+'').find('.btn').css('pointer-events', 'none');
$('#'+gameType+'').siblings().find('.btn').css('pointer-events', 'all');
$('#'+gameType+'').find('.btn').prop('disabled', checkBoxState);
$('#'+gameType+'').siblings().find('.btn').prop('disabled', !checkBoxState);
gameType is the current type of game (Player Vs Computer or Player1 Vs Player2).
input.game represent the input checkboxes
button.btnrepresent the 2 buttons available for each ìnput.game.
How can I add this functionality, i.e uncheck by clicking on current checked, or uncheck by clicking directly on the other checkbox?
Update 1
A click on a checkbox should automatically set its negation to the other checkbox.
Update 2
I tried to adapt the solution given by #CodeAt30 by doing simply:
gameType = (gameType == 'PlayerVsComputer') ? 'Player1VsPlayer2' : 'PlayerVsComputer';
$('#'+gameType).find('.game').prop('checked', !$('#'+gameType).find('.game').prop('checked'));
This solution works for uncheck the current checkbox and check its siblings().
But now, I can't select directly the other checkbox unlike to the JS Fiddle: Uncheck checkbox by clicking directly on the other no-checked "input checkbow"
https://jsfiddle.net/m059rr88/
HTML
<input id="one" type="checkbox"></input>
<input id="two" type="checkbox"></input>
Javascript:
let afterFirstClick = false;
$("input").click(function(){
let passiveCheckboxId = "one";
if($(this).attr("id") === "one"){
passiveCheckboxId = "two"
}
if(afterFirstClick){
$("input#" + passiveCheckboxId).prop("checked", !$("input#" + passiveCheckboxId).prop("checked"));
}
afterFirstClick = true;
});
Easier than you might think:
$('input.game').click(function(){
$('input.game').not(this).removeAttr('checked');
});
What is does is assign a click handler to the checkboxes that removes the checked attribute from all other boxes. The status of the current box is handled by the native checkbox code, so checking and unchecking will work normally.
... or ...
$('input.game').click(function(){
if (this.checked) {
$('input.game').not(this).removeAttr('checked');
} else {
$('input.game').not(this).trigger('click');
}
});
This code will allow you to swap checkboxes by clicking on either one. Once a box is checked there is no way to uncheck it, like a radio button.

JQuery: Check if any radio button is checked using radio button class name

I realize similar question had earlier been answered on stack overflow a few times. I checked all the questions and none were similar to mine.
I have a html form that has some radio buttons. In my validation I want to check if atleast one of the radio buttons are checked.
My approach so far:
All radio buttons have same class
All radio buttons have same name
I need to
check if atleast one of the radio button is selecetd
read the value of selected button.
My Javascript so far
function supportFormValidation(){
var isChecked = $('.radioButton').attr('checked')?true:false;
alert(isChecked);
return false;}
This always returns false. But when I try to read vale by individual IDs of each radio button it returns true. Is there any way I can check if a radio button is checked by using the class name.
JSFiddle: http://jsfiddle.net/evj9nch3/
Just use :checked.
var isChecked = !!($('.radioButton:checked').length);
In order to access the checked property you need to use the prop function (after 1.6 anyways). Because the value is either true or false, it's considered a property of the element not an attribute.
Nits answer is a better way of doing it, but look below for the reason why your implementation isn't working.
Take a look at this post for more info
Here is a link to the fiddle
function supportFormValidation() {
var isChecked = $('.radioButton').prop('checked') ? true : false;
alert(isChecked);
return false;
};
supportFormValidation();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' class='radioButton' checked='true' />
You can use this. I checked this is working
$(".ClassName").prop("checked", true)

How to check selected value of a radio group using id

I've seen many examples in stackoverflow getting the group radio value using input name. Is there any way to find it using id ?
It's generally better to use the name as it enables you to know which radio button in a group is selected (all radio buttons in a group have the same name but only one has a given id).
But if you want to check whether a particular radio button whose id you have is checked, you can do this :
var yesorno = document.getElementById('someId').checked;
Demonstration
If you want to get the value of the radio button whose id you know, it's simply
var value = document.getElementById('someId').value;
Short answer, not really.
You got to have a name otherwise the radio buttons will not work together, meaning all of them could be checked. When you already have a name, get the value by:
$('[name="myGroup"]:radio:checked').val()
I found out myself. This code worked for me!.
alert($('input[id=groudid]:checked').val());
var name = $("#myId").attr("name")
$(":radio").filter(function(){return $(this).attr("name") == name}).filter(":checked").val()

Show an element if all radio boxes have a selection in jQuery

I am trying to make a form show/hide a submit button dependant on if all the radio elements have a selection - this is what i've got so far.. Any ideas what i'm doing wrong?
$(document).ready(function() {
$('#submit-btn').hide();
if ($(':radio:checked').length > 0) {//try reach selected radio here
$('#submit-btn').show();
}
});
var count = 0
$(':radio').each(function(){
count++;
});
if ($(':radio:checked').length == count) {
$('#submit-btn').show();
}
This might help your cause..!!
$('.toCheck').length == $('.toCheck:checked').length;
If that evaluates to true, then all input for that selector are checked! :)
This will return true if ANY radio element is checked, which is not what you want.
Unfortunately there is no quick way to deal with radio elements, since even if one is checked the others will not show as checked.
You'll have to manually loop over them.
I worked it out using Robin's snippet with some modification.
I didn't explain properly that each 'question' has a set of 5 radio buttons (my fault) - but the following code does what I need now.
Essentially the same as Robins except as each question has 5 radio boxes I divide the length by 5 and it works now! Thank you everyone :)
$(document).ready(function() {
$('#submit-btn').hide();
$("form input:radio").change(function() {
var questions = ($('.questions').length / 5);
var checked = ($('.questions:checked').length);
if (questions == checked)
{
$('#submit-btn').show();
}
});
});

Need help with javascript regarding radiobuttons

I want to disable the radiobutton the second time it is clicked..I want to put some code in the head..that when a radiobutton is clicked the second time,, it isnt marked anymore..
I want to check and uncheck the radiobutton with each click.
Note: I generate 20 radiobuttons dynamically
Take into account that it is a Radiobutton that is run on the server:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.radiobutton.aspx
UPDATE: This is the only event that the RadioButton (asp WebControl run at="server") has:
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
var rad = (CheckBox)sender;
if (rad.Checked)
{
rad.Checked = false;
}
}
I can uncheck it after each post back..but unless a post back doesnt happen, i cant select and deselect it.. Thats the problem!! :(
I think you should keep with the standard use of RadioButtons, by saying this - use CheckBoxes instead, and clear all checkboxes if a different one is clicked...so when a checkbox is clicked the second time the standard uncheck will occur.
if i get you right then
all u need is a flag attribute of how many times u have clicked on the radio button and each time u click the radio the attribute increased by 1 and check the attribute every click if its 2nd time then disable the radiobutton
so you need to generate ur radiobuttons like this
<input type='radio' onclick='radioClick(this);' how_many_clicked='0' id='whatever id u need' name='whatever name u need' />
and create ur function in the head like the following
function radioClick(e) {
var flag = e.getAttribute('how_many_clicked');
var times = Number(flag);
times += 1;
e.setAttribute('how_many_clicked', times.toString())
if (times > 1) {
e.checked = false;
e.setAttribute('how_many_clicked', "0");
}
else {
e.checked = true;
}
}
Id create an empty array. For every radiobutton you create, add its ID to the array as the key and set its value to 0. This will be the count for the specific button. Whenever a radiobutton is clicked, check the buttons ID against the array, if its less than 2, increment it. If not, disable the current button.
EDIT : didn't realize you were checking if it was already checked, thoguht it was the number of times checked.
$("#id").is(":checked")
Should suffice
Another note ...if all you're doing is disabling an element from being accessed by the user, you should handle this event on the client side. You'll be using unnecessary server callback for functionality easily achievable via javascript. Use jquery click event handlers which can be generic enough for you not to have to use identifiers, making the job that much easier.
Cheers

Categories