There are some radio buttons
<input type="radio" name="highlight" data-price="25.1" value="a1">a1
<input type="radio" name="highlight" data-price="55.4" value="a2">a2
<input type="radio" name="highlight" data-price="65.3" value="a3">a3
<input type="radio" name="highlight" data-price="95.9" value="a4">a4
I want to print the "data-price" of selected radio button with live changing. How can I make this?
I don't know what exactly you are asking.. but if you just want to print the data-price, you can do it this way.
$(function(){
$('input[type=radio]').on('click',function(){
data= $(this).data('price');
$('#result').text(data);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="highlight" data-price="25.1" value="a1">a1
<input type="radio" name="highlight" data-price="55.4" value="a2">a2
<input type="radio" name="highlight" data-price="65.3" value="a3">a3
<input type="radio" name="highlight" data-price="95.9" value="a4">a4
<div id='result'>
</div>
HTML
<input class='radio' type="radio" name="highlight" data-price="25.1" value="a1">a1
<input class='radio' type="radio" name="highlight" data-price="55.4" value="a2">a2
<input class='radio' type="radio" name="highlight" data-price="65.3" value="a3">a3
<input class='radio' type="radio" name="highlight" data-price="95.9" value="a4">a4
<input id="price" type="text">
Javascript (onclick)
var inputs = document.getElementsByClassName('radio');
var textbox = document.getElementById('price');
var i;
for (i = 0; i < inputs.length; i++) {
inputs[i].onclick = function(){
textbox.value = this.dataset.price;
}
}
Javascript (eventListener)
for (i = 0; i < inputs.length; i++) {
function myFn(){
textbox.value = this.dataset.price;
}
inputs[i].addEventListener("change",myFn);
}
https://jsfiddle.net/2zfjfkhL/
Related
I want a checkbox that can enable (when checked) or disable (when unchecked) a group of input form elements. I have managed to do it with only one single element but I am struggling to do it with several elements. Here is my code:
Javascript:
function myFunction() {
var elements = document.getElementsByClassName("child1");
var el = document.getElementById("myCheck");
for(var i=0; i<elements.length; i++) {
if(el.checked) {
elements[i].removeAttribute("disabled");
} else {
elements[i].setAttribute("disabled","disabled");
}
}
}
HTML
<input type="checkbox" id="myCheck" onChange="myFunction()">Click the button to disable the form input elements<br>
<input type="radio" class="child1" name="group1" disabled="disabled">
<input type="radio" class="child1" name="group1" disabled="disabled">
<input type="radio" class="child1" name="group1" disabled="disabled">
<br>
<input type="radio" class="child1" name="group2" disabled="disabled">
<input type="radio" class="child1" name="group2" disabled="disabled">
<input type="radio" class="child1" name="group2" disabled="disabled">
<br>
<input type="text" class="child1" disabled="disabled">
(I have used getElementsByClassName as I understand that you can only have one ID by html page (i.e. getElementById would not work)).
JSFIDDLE https://jsfiddle.net/w2992L1y/
The disabled attribute does not have a value associated with it. So to disable an input element you only need to do <input disabled>. Similarly to enable/disable the input element using JavaScript you need to do:
element.disabled = true; //disable
element.disabled = false; //enable
For your example you could do like below:
function myFunction() {
var elements = document.getElementsByClassName("child1");
var el = document.getElementById("myCheck");
for (var i = 0; i < elements.length; i++) {
if (el.checked) {
elements[i].disabled = true;
} else {
elements[i].disabled = false;
}
}
}
<input type="checkbox" id="myCheck" onChange="myFunction()">Click the button to disable the form input elements
<br>
<input type="radio" class="child1" name="group1">
<input type="radio" class="child1" name="group1">
<input type="radio" class="child1" name="group1">
<br>
<input type="radio" class="child1" name="group2">
<input type="radio" class="child1" name="group2">
<input type="radio" class="child1" name="group2">
<br>
<input type="text" class="child1">
Here's the working fiddle of the same: https://jsfiddle.net/prerak6962/g96j4g7g/2/
I need one help. I need to check radio button as per value by taking the id and validate those using Javascript/Jquery. I am explaining my code below.
<div>
<input type="radio" name="rd0" value="57db18">Raj
<input type="radio" name="rd0" value="57da17">Rahul
<input type="radio" name="rd0" value="57db19">Mona
</div>
<br>
<br>
<div>
<input type="radio" name="rd1" value="57db18">A
<input type="radio" name="rd1" value="57da17">B
<input type="radio" name="rd1" value="57db19">C
</div>
<br>
<br>
<div >
<input type="radio" name="rd2" value="57db18">Apple
<input type="radio" name="rd2" value="57da17">Orange
<input type="radio" name="rd2" value="57db19">Mango
</div>
<span>
<button type="button" id="btn" name="btn" onclick="setValue()">Set</button>
</span>
<span>
<button type="button" id="vbtn" name="vbtn" onclick="validateRadioButtonValue()">Validate</button>
</span>
Here i have 3 set of radio button and when user will click on set button the radio button should check as per given value in a loop. the scripting part is given below.
var valu = ['57da17', '57db18', '57db19'];
function setValue(){
for(var i=0;i<valu.length;i++){
$('#rd'+i+'[value="' + valu[i]+ '"]').prop('checked', true);
console.log('checked btn',$('#rd'+i).is(':checked') );
}
}
but in this current case its not happening .When user will also click on validate button ,it should verify all radio button is checked or not.Please help me.
Try this :
$('input[name=rd'+i+'][value="' + valu[i]+ '"]').prop('checked', true)
var valu = ['57da17', '57db18', '57db19'];
function setValue(){
for(var i=0;i<valu.length;i++){
$('input[name=rd'+i+'][value="' + valu[i]+ '"]').prop('checked', true);
console.log('checked btn',$('input[name=rd' + i + ']').is(':checked') );
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="radio" name="rd0" value="57db18">Raj
<input type="radio" name="rd0" value="57da17">Rahul
<input type="radio" name="rd0" value="57db19">Mona
</div>
<br>
<br>
<div>
<input type="radio" name="rd1" value="57db18">A
<input type="radio" name="rd1" value="57da17">B
<input type="radio" name="rd1" value="57db19">C
</div>
<br>
<br>
<div >
<input type="radio" name="rd2" value="57db18">Apple
<input type="radio" name="rd2" value="57da17">Orange
<input type="radio" name="rd2" value="57db19">Mango
</div>
<span>
<button type="button" id="btn" name="btn" onclick="setValue()">Set</button>
</span>
<span>
<button type="button" id="vbtn" name="vbtn" onclick="validateRadioButtonValue()">Validate</button>
</span>
You have specified an invalid selector - # is id selector.
Combine multiple filters like this $(input[name=""][value=""]. Check below example.
$(function() {
var valu = ['57da17', '57db18', '57db19'];
$('#btn').click(function() {
for (var i = 0; i < valu.length; i++) {
$('input[name="rd' + i + '"][value="' + valu[i] + '"]').prop('checked', true);
}
});
$('#vbtn').click(function() {
for (var i = 0; i < valu.length; i++) {
console.log('checked btn', $('input[name="rd' + i + '"]').is(':checked'));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="radio" name="rd0" value="57db18">Raj
<input type="radio" name="rd0" value="57da17">Rahul
<input type="radio" name="rd0" value="57db19">Mona
</div>
<br>
<br>
<div>
<input type="radio" name="rd1" value="57db18">A
<input type="radio" name="rd1" value="57da17">B
<input type="radio" name="rd1" value="57db19">C
</div>
<br>
<br>
<div>
<input type="radio" name="rd2" value="57db18">Apple
<input type="radio" name="rd2" value="57da17">Orange
<input type="radio" name="rd2" value="57db19">Mango
</div>
<span>
<button type="button" id="btn" name="btn">Set</button>
</span>
<span>
<button type="button" id="vbtn" name="vbtn">Validate</button>
</span>
You are selecting the radio btns by ID (with "#") while they don't have ID.
You should select them by name.
With jQuery name select is something like this:
var valu = ['57da17', '57db18', '57db19'];
function setValue(){
for(var i=0;i<valu.length;i++){
$('input[name=rd'+i+'[value="' + valu[i]+ '"]').prop('checked', true);
console.log('checked btn',$('input[name=rd'+i+']').is(':checked') );
}
}
Validate that at-least one radio should be checked from each group.
var valu = ['57da17', '57db18', '57db19'];
function setValue(){
for(var i=0;i<valu.length;i++){
$('input[name=rd'+i+'][value="' + valu[i]+ '"]').prop('checked', true);
}
}
function validateRadioButtonValue(){
for(var i=0;i<valu.length;i++){
if(!$('input[name="rd'+i+'"]').is(":checked"))
{
alert("Please select checkbox named "+"rd"+i);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="radio" name="rd0" value="57db18">Raj
<input type="radio" name="rd0" value="57da17">Rahul
<input type="radio" name="rd0" value="57db19">Mona
</div>
<br>
<br>
<div>
<input type="radio" name="rd1" value="57db18">A
<input type="radio" name="rd1" value="57da17">B
<input type="radio" name="rd1" value="57db19">C
</div>
<br>
<br>
<div>
<input type="radio" name="rd2" value="57db18">Apple
<input type="radio" name="rd2" value="57da17">Orange
<input type="radio" name="rd2" value="57db19">Mango
</div>
<span>
<button type="button" id="btn" name="btn" onclick="setValue()">Set</button>
</span>
<span>
<button type="button" id="vbtn" name="vbtn" onclick="validateRadioButtonValue()">Validate</button>
</span>
I have a number of radio buttons with the option, 'yes' or 'no'.
Is there a simple way with jQuery to check if they all have 'yes' selected?
HTML is:
<input type="radio" id="yes1" name="group1" value="yes">Yes<br>
<input type="radio" name="group1" value="No">No<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes<br>
<input type="radio" name="group2" value="No">No<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes<br>
<input type="radio" name="group3" value="No">No<br>
I'm guessing it's something along the lines of
yes1 = $("#yes1").prop("checked", true);
yes2 = $("#yes2").prop("checked", true);
yes3 = $("#yes2").prop("checked", true);
if (yes1 & yes2 & yes3) {
// do something ?
}
You can rather compare the length of elements with ['value=yes] with elements with ['value=yes] and property :checked:
if($('[value=yes]').length==$('[value=yes]:checked').length){
//all yes elements are checked
}
One way is to check whether all the radios with value as yes is checked
if($('input[type="radio"][value="yes"]').not(':checked').length == 0){
//all checked
}
You may check the count of radio buttons with value != true. If the count is Zero, all radio buttons would be selected.
if(!$('input[type="radio"][value="yes"]').not(':checked').length){
//select all radio buttons with value = yes
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="radio" id="yes1" name="group1" value="yes">Yes
<br>
<input type="radio" name="group1" value="No">No
<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes
<br>
<input type="radio" name="group2" value="No">No
<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes
<br>
<input type="radio" name="group3" value="No">No
<br>
<input type="button" id="btn" value="Test" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
var length = 3;
var isChecked = true;
for (var i = 1; i <= length; i++) {
isChecked = isChecked && ($("#yes" + i).is(":checked"));
}
if (isChecked)
alert("All are checked");
else
alert("All are not checked");
});
});
</script>
</body>
</html>
<input type="radio" id="yes1" name="group1" value="yes" checked>Yes<br>
<input type="radio" name="group1" value="No">No<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes" checked>Yes<br>
<input type="radio" name="group2" value="No">No<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes" checked>Yes<br>
<input type="radio" name="group3" value="No">No<br>
var yes1 = $("#yes1").is(":checked")
var yes2 = $("#yes2").is(":checked")
var yes3 = $("#yes3").is(":checked")
//$("#Myradio").is(":checked")
if (yes1 & yes2 & yes3) {
alert('sasa');
//do something
}
FIDDLE
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="radio" id="yes1" name="group1" value="yes">Yes
<br>
<input type="radio" name="group1" value="No">No
<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes
<br>
<input type="radio" name="group2" value="No">No
<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes
<br>
<input type="radio" name="group3" value="No">No
<br>
<input type="button" id="btn" value="Test" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
var length = 3;
var isChecked = true;
for (var i = 1; i <= length; i++) {
isChecked = isChecked && ($("#yes" + i).is(":checked"));
}
if (isChecked)
alert("All are checked");
else
alert("All are not checked");
});
});
</script>
</body>
</html>
I have 6 inputs in my HTML like this:
<input type="radio" value="1" />
<input type="radio" value="2" />
<input type="radio" value="3" />
<input type="radio" value="4" />
<input type="radio" value="5" />
<input type="submit" onClick="myFunction();" value="submit" />
When the submit button is clicked, a Javascript function is called. In this javascript function, I want to check which of the radio buttons is checked and which aren't.
Thanks in advance!
javascript
function myFunction() {
var x = document.getElementsByTagName("input");
for(i = 0; i < x.length; i++ ) {
if(x[i].type = "radio") {
if(x[i].checked) {
alert(x[i].value);
}
}
}
}
you can do it easily by jquery
function myfunction(){
$("input[type=radio]:checked").each(function(){
//do something here
});
}
You need to add a class first. this will ensure that you are not checking other radio elements in your page. See below.
<input type="radio" value="1" class='radio'/>
<input type="radio" value="2" class='radio'/>
<input type="radio" value="3" class='radio'/>
<input type="radio" value="4" class='radio'/>
<input type="radio" value="5" class='radio'/>
<input type="submit" onClick="myFunction();" value="submit" />
<!-- javascript- add script tags -->
function myFunction() {
$('.radio').each(function() {
if($(this).is(':checked')) {
alert("it's checked");
}
})
}
I have the following HTML
CHOICE 1
<input type="radio" name="c1" value="0" class="a"> Yes
<input type="radio" name="c1" value="1" class="a"> No
<input type="radio" name="c1" value="2" class="a"> Only <input type="text" id="t1" />
<br />
CHOICE 2
<input type="radio" name="c2" value="0" class="a"> Yes
<input type="radio" name="c2" value="1" class="a"> No
<input type="radio" name="c2" value="2" class="a"> Only
<input type="text" id="t2" />
<br />
CHOICE 3
<input type="radio" name="c3" value="0" class="a"> Yes
<input type="radio" name="c3" value="1" class="a"> No
<input type="radio" name="c3" value="2" class="a"> Only
<input type="text" id="t3" />
<br />
<button>Press me</button>
I want to get the value of the textbox if the radio button selected is "Only". Any idea on how to do it?
This is my current jQuery script
var arr = new Array();
var rad;
var i = 0;
var id;
$('button').click(function(){
$('input[type="radio"]:checked').each(function(){
rad = $('input[type="radio"]:checked').val();
if(rad == 2){
id = this.id;
arr[i] = $('input[type="text"]#'+id).val();
}
else{
arr[i] = $(this).val();
}
i++;
});
alert(arr);
i = 0;
});
Using this script only gives me repeated value of the textbox. The "Yes" and "No" (0 and 1) values doesnt appear.
Prints the value of the .next() input field to the console when the button was clicked and the "Only" radio was selected.
Demo on jsbin
$("button").click(function(){
$("input[type=radio]:checked").each(function(){
if($(this).val() == 2) {
console.log($(this).next("input[type=text]").val());
}
});
});
Simple enough.
if ( jQuery("input[name='c1']:checked").val() === '2' ) {
return jQuery("#t1").val();
}
You can add some extra logic to generate the c1 and t1 strings dynamically to make it generic.