$().ready(function () {
$(".div").find("input").each(function (index) {
if($(this).attr("checked")==true){
console.log("You have checked the"+index);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<input name="1" type="radio" >
<input name="1" type="radio" checked="checked" >
<input name="1" type="radio" >
<input name="1" type="radio" >
</div>
Why I cannot use "find" and "each" function to justify which the radio is checked?
The attribute value is 'checked', not true:
if ($(this).attr("checked") == 'checked') {
console.log("You have checked the " + index);
}
Also note that you can make the index retrieval a one-liner using the :checked selector:
$(document).ready(function() {
var index = $(".div").find("input:checked").index();
console.log("You have checked the " + index);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<input name="1" type="radio">
<input name="1" type="radio" checked="checked">
<input name="1" type="radio">
<input name="1" type="radio">
</div>
console.log("You have checked the " + $("input[name=1]:checked").index());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<input name="1" type="radio">
<input name="1" type="radio" checked="checked">
<input name="1" type="radio">
<input name="1" type="radio">
</div>
No need to use .each() use selector :checked
Description: Matches all elements that are checked or selected.
The problem is whenever you perform $(this).attr("checked") it does NOT returns true, instead, it returns checked for the radio's that are checked and undefined for those which aren't checked.
$().ready(function () {
$("div").find("input").each(function (index) {
if($(this).attr("checked")=="checked"){
console.log("You have checked the "+index);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<input name="1" type="radio" >
<input name="1" type="radio" checked="checked" >
<input name="1" type="radio" >
<input name="1" type="radio" >
</div>
You can find below fiddle.
$('#myForm input').on('change', function() {
alert($('input[name=radioName]:checked', '#myForm').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radioName" value="1" /> 1 <br />
<input type="radio" name="radioName" value="2" /> 2 <br />
<input type="radio" name="radioName" value="3" /> 3 <br />
</form>
You may use the following code to find the value of the selected radio button:
HTML
<table>
<tr>
<td><input type="radio" name="q12_3" value="1">1</td>
<td><input type="radio" name="q12_3" value="2">2</td>
<td><input type="radio" name="q12_3" value="3">3</td>
<td><input type="radio" name="q12_3" value="4">4</td>
<td><input type="radio" name="q12_3" value="5">5</td>
</tr>
</table>
JQUERY
$(function(){
$("input[type=radio]").click(function(){
alert($('input[name=q12_3]:checked').val());
});
});
FIDDLE
Related
I have three different group of radio buttons in my form. If I click on the radio button I don't see attribute checked set to true. I'm wondering what is the best way to handle this in JQuery/JavaScript? Here is example:
$("input[type=radio]").on('click', function() {
var secondClick = true;
$(this).change(function() {
secondClick = false;
});
$(this).click(function() {
if (secondClick) {
$(this).prop("checked", false);
}
secondClick = true;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frmhs_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>
Function above did not change/set the attribute checked=true on the element that I clicked. I would like to see selected element with an attribute checked true and all other check boxes to be set to false.
var radioInputs = $("#myForm input[type=radio]")
radioInputs.on('change',function() {
var $this = $(this)
if ($this.is(':checked')) {
radioInputs.not($this).removeAttr('checked')
}
})
Your second input in conditions was named frmhs_cond instead of frm_cond
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frm_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>
I have some generated HTML along the lines of this.
<form id="form_56">
<input type="radio" name="option" value="0">
<input type="radio" name="option" value="1">
<input type="radio" name="option" value="2">
<input type="radio" name="option" value="3">
<input type="radio" name="option" value="4">
<input type="radio" name="option" value="5">
<input type="radio" name="option" value="6">
</form>
The form id can be anything, but I want to take a form ID and return the selected value from 0 to 6.
I tried following the questions here, but they didn't seem to translate easily to a specific form.
$('#form_56:radio[name=option]:checked').val();
I'm able to use the selector to grab the proper form, but everything I've attempted to get the selected value has returned undefined.
Thanks for your time.
First, you need to change the colon to a space or " > ".
Second you need to change radio to input.
$('#form_56 input[name=option]:checked').val();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_56">
<input type="radio" name="option" value="0">
<input type="radio" name="option" value="1">
<input type="radio" name="option" value="2">
<input type="radio" name="option" value="3">
<input type="radio" name="option" value="4">
<input type="radio" name="option" value="5">
<input type="radio" name="option" value="6">
</form>
<a href="javascript:console.log($('#form_56 input[name=option]:checked').val());">
<button>Test</button>
</a>
$("#form_56 input:radio[name='option']").val()
You need an event for listening when it changes
see example
$(function() {
$("#form_56 input:radio[name='option']").click(function() {
var val = $(this).val();
alert(val);
});
});
https://jsfiddle.net/rodrigo/cp8rd7h0/
problem in your code: on change event not assign to radio button so undefined alert popup
here is solution:
$(document).ready(function () {
$('input[type=radio]').on('change', function () {
alert($('input[name=option]:checked', '#form_56').val());
});
});
For any form:
$('form>input[type="radio"]:checked').val()
With id:
$('#form_56>input[type="radio"]:checked').val()
It will return selected value or undefined, if no value selected.
Good luck!
function getSelectedValue()
{
return $('form>input[type="radio"]:checked').val();
}
$(function() {
$('button').on(
'click',
function() {
console.log(getSelectedValue() + ' selected');
}
);
});
form {display: inline}
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<form id="randomId-839054763">
<input type="radio" name="option" value="0">
<input type="radio" name="option" value="1">
<input type="radio" name="option" value="2">
<input type="radio" name="option" value="3">
<input type="radio" name="option" value="4">
<input type="radio" name="option" value="5">
<input type="radio" name="option" value="6">
</form>
<button>Log value</button>
I have a list of checkboxes:
<input name="choice" type="checkbox" id="choice1" value="A" />
<input name="choice" type="checkbox" id="choice2" value="B" />
<input name="choice" type="checkbox" id="choice3" value="C" />
<input name="choice" type="checkbox" id="choice4" value="D" />
Name is the same for all but id is different.
I need to check if a particular checkbox (for example the one with id=choice3 is checked.
Tried
if (this.choice.id === "choice3" && this.choice[2].checked) {
alert("checked!");
}
but it does not work - the alert is never reached
P.S. I need to use javascript not jquery
Thats how you do it without jQuery:
Suppose your form is like this:
<form id="myForm" action="test.php">
<input name="choice" type="checkbox" id="choice1" value="A"/>
<input name="choice" type="checkbox" id="choice2" value="B"/>
<input name="choice" type="checkbox" id="choice3" value="C"/>
<input name="choice" type="checkbox" id="choice4" value="D"/>
<input type="button" onclick="validate();" value="Submit form">
</form>
You can do the validation on submit this way:
function validate() {
if (document.getElementById('choice3').checked) {
alert("checked");
} else {
alert("You didn't check it! ");
}
}
$('input[name^=tc]').click(function(){
var attr = $(this).attr('name');
$(this).siblings('input[name='+attr+']').prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
1
<input name="tc0" value="Y" type="checkbox">
<input name="tc0" value="N"type="checkbox">
2
<input name="tc1" value="Y" type="checkbox">
<input name="tc1" value="N" type="checkbox">
3
<input name="tc2" value="Y" type="checkbox">
<input name="tc2" value="N" type="checkbox">
How can I get the final value of all checkbox base on their name?
For example, if I check value "Y" for tc0, value "N" for tc1, value "Y" for tc2.
How can I get "YNN" or ["Y", "N" ,"N"] back to me?
first, I going to assume there was a reason why you aren't using RADIO instead of CHECKBOX, since RADIO accomplishes the single check per group without the extra Jquery on click.
//changed CLICK to CHANGE
$('input[name^=tc]').change(function(){
var attr = $(this).attr('name');
$(this).siblings('input[name='+attr+']').prop('checked', false);
});
//get ids
vals = "";
$("input[type=checkbox]:checked").each(function(){
vals += $(this).val();
});
console.log(vals);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input checked name="tc0" value="Y" type="checkbox">
<input name="tc0" value="N"type="checkbox">
<input checked name="tc1" value="Y" type="checkbox">
<input name="tc1" value="N" type="checkbox">
<input checked name="tc2" value="Y" type="checkbox">
<input name="tc2" value="N" type="checkbox">
The logic demands using radio buttons instead of checkboxes. Here is a solution using radio buttons
$('#getResult').on('click', getResult);
function getResult(){
var result=[];
$('input[name^=tc]:checked').each(function(){
result.push($(this).val());
});
alert(result.toString());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
1<br>
<input name="tc0" value="Y" type="radio">Yes <br>
<input name="tc0" value="N"type="radio">No<br>
2<br>
<input name="tc1" value="Y" type="radio">Yes <br>
<input name="tc1" value="N" type="radio">No<br>
3<br>
<input name="tc2" value="Y" type="radio">Yes <br>
<input name="tc2" value="N" type="radio">No<br>
<button id="getResult">Get Result</button>
I have a few radio buttons, and when I select one of them, I also have to check another one.
For example, if I select yes on a radio button, another radio button must be automatically checked with no.
I tried a few scripts but don't seem to work.
Does anyone know a solution? I'm new in JS.
Thanks in advance!
> Live Demo <
<!--HTML-->
<input type="radio" name="group_1" value="yes" id="r1">Yes<br>
<input type="radio" name="group_1" value="no" id="r2">No<br>
<br>
<input type="radio" name="group_2" value="yes" id="r3">Yes<br>
<input type="radio" name="group_2" value="no" id="r4">No<br>
//Script
$("input[name='group_1']").click(function(){
if(this.value=="yes"){
$("input#r4").attr("checked",true);
}else{
$("input#r3").attr("checked",true);
}
});
$("input[name='group_2']").click(function(){
if(this.value=="yes"){
$("input#r2").attr("checked",true);
}else{
$("input#r1").attr("checked",true);
}
});
I'm not very certain on what you are trying to achieve but by using the "name" attribute this automatically happens...when you check one radio...the others with the same name get set to unchecked.
<input type="radio" name="someoption" value="0" />0
<input type="radio" name="someoption" value="1" />1
<input type="radio" name="someoption" value="2" />2
checking any one of the above will cause the other 2 to be unchecked
unless do you may be mean checkboxes or multiple option sets ?
javascript:
$('#myradio1').bind('change', function () {
$('#myradio3').attr('checked', 'checked');
});
html
<input type="radio" name="cols1" value="1" id="myradio1" />
<input type="radio" name="cols1" value="2" id="myradio2" />
<input type="radio" name="cols2" value="1" id="myradio3" />
<input type="radio" name="cols2" value="2" id="myradio4" />
see working example at http://jsfiddle.net/9jXbv/
For HTML markup like below:
<div>
<input type="radio" name="one" value="yes"> yes
<input type="radio" name="one" value="no"> no
</div>
<div>
<input type="radio" name="two" value="yes"> yes
<input type="radio" name="two" value="no"> no
</div>
you can use this JavaScript code:
$(":radio").on("change", function() {
var that = this;
$(":radio").filter(function() {
return this.value == "no" && this.name != that.name;
}).prop("checked", true);
});
DEMO: http://jsfiddle.net/nKLMX/
With jquery:
$("#radio1").change(function() {
$("#radio2").removeAttr("checked");
});
http://jsfiddle.net/
I've mocked up a pure JS solution to this ( No libraries )
<input type="radio" name="g1" value="1" />Yes
<br />
<input type="radio" name="g1" value="0" />No
<br /><br />
<input type="radio" name="g2" value="1" />Yes
<br />
<input type="radio" name="g2" value="0" />No
<script type="text/javascript">
var g1 = document.getElementsByName('g1'); // store g1 elements
var g2 = document.getElementsByName('g2'); // store g2 elements
// handle click functionality
function radio_checked_event(obj, f) {
if(obj.addEventListener) {
obj.addEventListener('click', f, false);
} else if(obj.attachEvent) {
obj.attachEvent('onclick', f);
}
}
// when you click on g1 yes
radio_checked_event(g1[0], function() {
//set g1 no to checked
g2[1].setAttribute('checked', 'checked');
});
</script>