I guess the problem is pretty simple but I couldn't find a solution anywhere. I want to check whether a radio button is checked or not. From here a possible solution:
For these inputs
<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />
you can simply
if(document.getElementById('gender_Male').checked) {
//Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
//Female radio button is checked
}
Yet my inputs are like this:
<label><input id="16" type="radio" value="14" name="Q3"></input>Yes</label>
<label><input id="16" type="radio" value="15" name="Q3"></input>No</label>
id is not unique by itself but only in combination with value... How do I check whether Yes or No are selected?
As #Markasoftware said, id should always be unique. But browser still parse your html with the same ids.
So key point is that you can select an element without id.
Try document.querySelectorAll or document.querySelector. Here is code:
document.querySelectorAll('input[value="14"]') // you can select all the `value='14'` inputs
document.querySelectorAll('input[name="Q3"]') // you can select all the `value='Q3'` inputs
You can compose these css3 selectors and reach your goal.
You can try the next selector:
$('input#16.14').is(':checked'){
//YES is checked
}
$('input#16.15').is(':checked'){
//NO is checked
}
But id should be unique.
Another way to check which one is selected it's using the input name:
$('input[name=Q3]:checked').val()
This way you will get 14 if YES is checked or 15 if No is checked
Assuming the yes/no element is next element of your gender radio, you can try something like:
$('[name="gender"]').change(function(){
if($(this).val() == 'Male'){
$(this).next('input[type="radio"][value="14"]').prop('checked',true);
}else{
//Female
}
});
Add a class to your radio buttons.
$('.radioGroup').change(function(){
if($(this).val() == 'Male'){
///
} else {
//female
}
});
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<label><input id="16" type="radio" value="14" name="Q3"/>Yes</label>
<label><input id="16" type="radio" value="15" name="Q3"/>No</label>
<script type="text/javascript">
$('input[name=Q3]').change(function () {
if ($('input[name=Q3]:checked').length > 0) {
var k = $('input[name=Q3]:checked').val();
alert(k);
}
});
</script>
</body>
</html>
$(':radio').on('change',function() {
if( this.checked && this.value === "14" ) {
alert( "'Yes' was selected!" );
} else if( this.checked && this.value === "15" ) {
alert( "'No' was selected!" );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input id="Q3_1" type="radio" value="14" name="Q3">Yes</label>
<label><input id="Q3_2" type="radio" value="15" name="Q3">No</label>
Related
for single id i did like this but how to get all id on click of button when check the universal checkbox for all the columns
My Html File:-
<td><input type="checkbox" name="option" value="{{item.customerid}} " required ></td>
<input type="button" value="Transfer" (click)="getclickedevent($event)">
My Javascript file:-
getclickedevent(event) {
let id = $("input:checkbox[name=option]:checked").val();
console.log("The Required checkbox checked is "+ id)
}
make all the id's children of one master id
then use this
var div = // getElementById, etc
var children = div.childNodes;
var elements = [];
for (var i=0; i<div.childNodes.length; i++) {
var child = div.childNodes[i];
if (child.nodeType == 1) {
elements.push(child)
}
}
I hope you don't mind but I took the approach of refactoring your code.
Here is the HTML:
<td>
<input type="checkbox" name="option" value="{{item.customerid}}" required >
</td>
<input type="button" value="Transfer">
<div id='options'>
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
</div>
And here is the jQuery. I used jQuery because you missed native javascript and jQuery in your code:
$('input[type="button"][value="Transfer"]').click( function() {
let id = $("input:checkbox[name=option]").is(':checked');
$('input[name="options"]').each(function() {
this.checked = id;
});
});
You can see it all working here.
You can get all checked checkboxes values inside button click event handler using jquery .map() method like:
var ids = $("input:checkbox[name=option]:checked").map(function(){
return $(this).val();
}).get();
console.log(ids) //==> ['xxx', 'xxx', 'xxx', ...]
This will give a basic array containing all checked checkboxes values.
DEMO:
$("#checkAll").click(function() {
$("input:checkbox[name=option]").prop('checked', this.checked);
var ids = $("input:checkbox[name=option]:checked").map(function() {
return $(this).val();
}).get();
console.log(ids)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll">Check All
<hr />
<input type="checkbox" name="option" value="1">Item 1
<input type="checkbox" name="option" value="2">Item 2
<input type="checkbox" name="option" value="3">Item3
This should work for you. ↓↓
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<input type="checkbox" onclick="$('input[name*=\'customer_store\']').prop('checked', this.checked);"/> Select / Deselect<br>
<input type="checkbox" name="customer_store[]" value="xyz"/>xyz<br>
<input type="checkbox" name="customer_store[]" value="abc"/>abc<br>
Add ID to your button inputs and call on them as selectors for .click().
Add a function to get the click on the select all button and set all inputs to checked used an added class of option for to select the input elements that are check boxes.
Define an empty array to hold your values. Run your checked values through .each() loop and assign them to the array.
Those values will now live in the options array.
$(document).ready(function() {
$('#selectall').click(function(){
$('.option').prop("checked", true);
});
$('#transfer').click(function() {
var options = [];
$.each($("input[type='checkbox']:checked"), function() {
options .push($(this).val());
});
console.log(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input type="button" id="transfer" value="Transfer">
<input type="button" id="selectall" value="Select All">
I'm using this in a form to check whether a radio button group has a certain value (Yes/No). The HTML for one of these is:
<form id="registerHere">
<div class="control-group">
<label class="radio">
<input type="radio" value="Yes" name="freemedia">
Yes
</label>
<label class="radio">
<input type="radio" value="No" name="freemedia" checked="checked">
No
</label>
</div></form>
And I'm using the following JS (jQuery.validate.js is included):
<script type="text/javascript">
$(document).ready(function(){});
$("#registerHere").validate({
rules:{
freemedia:{
required:true,
equalTo: "Yes"
},
},
messages:{
freemedia:{
required:"Please select",
equalTo:"Please apply to the 'freemedia' group first.</a>"
},
},
});
});
</script>
However, it is not checking the value correctly, as it always shows me the message, regardless of whether 'Yes' or 'No' is checked.
Where am I going wrong?
I cleaned up some of your jquery, you had a few errors in there.
Also, digging around in the plugin I noticed that you can use the 'equalTo' parameter to specify which control is required. It just uses the 'equalTo' as a selector for a query. So if you treat your 'equalTo' setting as a jquery selector, it should work. It may be a bit of a hack, but I had it working.
All you need to do is assign an id to your radio buttons and you should be good to go
<div class="control-group">
<label class="radio">
<input id="chkYes" type="radio" value="Yes" name="freemedia" />
Yes
</label>
<label id="chkNo" class="radio">
<input type="radio" value="No" name="freemedia" />
No
</label>
<input type="submit" value="Submit" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#registerHere").validate({
rules:
{
freemedia:
{
required: true,
equalTo: "#chkYes"
}
},
messages:
{
freemedia:
{
required: "Please select",
equalTo: "Please apply to the 'freemedia' group first."
}
}
});
});
</script>
You want to check your value selected at the time of form submission ,That's the good way to do it Give a predefined selected radio button and then check the selected Radio at the time of form sub mission that what done here
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="radio" name="sex" value="Male" checked>Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown" >Unknown</input>
<div onclick="CheckMe();"> check Selected Radio button</div>
</body>
<script>
function CheckMe()
{
alert("value selected "+$('input:radio[name=sex]:checked').val());
}
</script>
</html>
Now Suppose you have not selected any Radio button by default then you can check that whether user has selected any radio butoon or not and if selected what is it?
Following code helps you in doing that
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
<div onclick="CheckMe();"> check Selected Radio button</div>
</body>
<script>
function CheckMe()
{
if ($('input:radio[name=sex]:checked').val())
alert("value selected "+ $('input:radio[name=sex]:checked').val());
else
alert("Please select Radio button");
}
</script>
</html>
Enjoy..!
In jquery validation plug-in "equalTo" is used to compare value between the fields, not on same field.(It's my study if any one knows more about it.Please let me know.)
You can add your custom method to it.
$.validator.addMethod("check_for_yes", function(value, element) {
return $('.freemedia').val() != "Yes"
}, "* Please apply to the 'freemedia' group first.");
Validation -
rules : {
freemedia : {
check_for_yes: true
}
}
OR
You can check it on Jquery click event of radio button by showing alert.
I have a group of radio buttons with the name 'periodType'. There is one radio button in that group which behaves the same way as the others, except for the fact that it displays an additional div. How can I get to know when that particular radio button is checked, as the change function below is quite generic for all the radio buttons in the group:
$('input[name="periodType"]').change(function() {
if(this.checked) {
//do something (for all radio buttons)
//If unique radio button also do this
}
});
<input type="radio" name="periodType" default>
<input type="radio" name="periodType" default>
<input type="radio" name="periodType" default>
<input type="radio" name="periodType" default>
You may want to add a value to your radio inputs:
<input type="radio" name="periodType" value="one" default>
<input type="radio" name="periodType" value="two" default>
<input type="radio" name="periodType" value="three" default>
<input type="radio" name="periodType" value="four" default>
and then query that value:
$('input[name="periodType"]').change(function() {
if (this.value == 'three' && this.checked) {
//do something (for all radio buttons)
//If unique radio button also do this
}
});
$('input[name="periodType"]').change(function() {
if(this.checked) {
//do something (for all radio buttons)
//If unique radio button also do this
var idval = $(this).attr("id");
if (idval == "something")
{
//do something
}
}
});
May be you are looking for something like this. I have added each radio to its own div just to show the behaviour on change. Please let me know if you have any questions.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
.selected{background-color: #fad42e;}
.notSelected{background-color: #6f6e73;}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('input[name="periodType"]').change(function() {
$(this).parent('div').removeClass();
$(this).parent('div').addClass('selected');
$('input[name="periodType"]')
.parent('div')
.not($(this).parent("div"))
.each(function(e){
$(this).removeClass();
$(this).addClass("notSelected");
});
});
});
</script>
</head>
<body>
<div>
<input type="radio" name="periodType" >
</div>
<div>
<input type="radio" name="periodType" >
</div>
<div>
<input type="radio" name="periodType" >
</div>
<div>
<input type="radio" name="periodType" >
</div>
</body>
</html>
I wrote this code to switch between radio buttons and show my custom alert.
<script>
function test() {
if (radio[0].checked = true) {
alert("hello1");
}
if (radio[1].checked = true) {
alert("hello2");
}
}
</script>
<input type="radio" onclick="test()" value="0">
<input type="radio" onclick="test()" value="1">
When check any of radio buttons it must show specific alert.
What is wrong?
You should name your radio buttons, and call them from javascript.
<script>
function test() {
if (document.getElementById('radio1').checked == true) {
alert("hello1");
}
if (document.getElementById('radio2').checked == true) {
alert("hello2");
}
}
</script>
<input type="radio" id="radio1" onclick="test()" value="0">
<input type="radio" id="radio2" onclick="test()" value="1">
Two things you need to take note here:
1) You must use the 'name' attribute in the radio button. Otherwise you won't be able to check the radio button.
2) You cannot use radio[0] to point to the radio button. You can assign an ID to it and use getElementById method to use it in Javascript. Another easy way is to pass the object to the function. Please refer to the sample code below:
<script>
function test(radioObj) {
if(radioObj.value == "0")
alert("Hello1");
else if (radioObj.value == "1")
alert("Hello2");
}
</script>
<input type="radio" name="test" onclick="test(this)" value="0">
<input type="radio" name="test" onclick="test(this)" value="1">
radio[0] and radio[1] are defined in your html but not in your javascript. You can try using JQuery or one of the many javascript selector libraries. Or use getElementById
I want replace a p tag value if a radio is checked.
I write some JS to do this,but nothing changed.
this is my code(I use jquery)
<script>
$(function(){
if ($('#A:checked')) {
$("#change_me").html('<input type="radio" value="1" name="fruit">')
}
if ($('#B:checked')) {
$("#change_me").html('<input type="radio" value="2" name="fruit">')
}
}
</script>
<input type="radio" name="e" id="A" checked="checked">
<input type="radio" name="e" id="B">
<p id="change_me">
<input type="radio" value="1" name="fruit">
</p>
Thanks.
The :checked selector matches elements that are currently checked.
Writing $('#B:checked') returns a jQuery object containing either zero or one element. It cannot be used directly as a condition.
Instead, you can check if ($('#B:checked').length) to see whether the jQuery object has anything in it.
First, you don't need to recreate the radio button if only the value is changing.
$(function(){
if ($('#A:checked').size() > 0) {
$("#change_me input[type=radio]").val('1')
}
if ($('#B:checked').size() > 0) {
$("#change_me input[type=radio]").val('2')
}
}
HTML:
<input type="radio" name="e" id="A" checked="checked">
<input type="radio" name="e" id="B">
<p id="change_me">
<input type="radio" value="1" name="fruit">
</p>
Replace the JavaScript code you have with the following
$(function(){
$('input[name=e]').change(function(){
if($(this).attr('id') == 'A')
{
$("#change_me input").val('1');
}
else
{
$("#change_me input").val('2');
}
});
});