Select first radio button by default - javascript

I'm trying to select the first radio button by default. However, every code I have tried has not worked. Any help would be appreciated.
jsfiddle - http://jsfiddle.net/te2b5dqy/
$('.radiogroup').change(function(e) {
const $this = $(this), $link = $("#url");
$link.html($this.val());
$link.attr("href", $this.attr("data-url"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" />
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />
<a id="url" href="" target="_blank">null</a>

You can simply add .eq(0).click()
$('.radiogroup').change(function(e) {
const $this = $(this), $link = $("#url");
$link.html($this.val());
$link.attr("href", $this.attr("data-url"));
}).eq(0).click(); //<<<<<<< here
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" />
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />
<a id="url" href="" target="_blank">null</a>
OR .eq(0).prop('checked' , true).change()
$('.radiogroup').change(function(e) {
const $this = $(this), $link = $("#url");
$link.html($this.val());
$link.attr("href", $this.attr("data-url"));
}).eq(0).prop("checked" , true).change(); //<<<<<<< here
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" />
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />
<a id="url" href="" target="_blank">null</a>
Additional: A lot of ways to select the first radio .eq(0) , .first() , .filter(':eq(0)') , .filter(':nth-child(1)')

The checked="checked" will do the trick
<input type="radio" name="radiogroup" id="radiogroup1" checked="checked"
class="radiogroup" value="Google" data-url="https://google.com" />

Solution
checked attribute will solve this
Here is the code snippet
<input type="radio" checked />
<input type="radio" />

XHTML solution:
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup"
value="Google" checked="checked" data-url="https://google.com" />
Note, the actual value of checked attribute does not matter actually; it's just a way to assign "checked". Importantly, like "true" or "false" don't have any special meaning.
If you don't aim for XHTML, you can make the code more simplify:
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup"
value="Google" data-url="https://google.com" checked>

Related

Show only Checked Options using Jquery

How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.
$("#checked_show").click(function() {
$("input").hide();
$("label").hide();
$("input:checked").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.
You can use input:checked combined with :not() to select the inputs that aren't checked.
$("#checked_show").click(function() {
$("input:not(:checked)").each((i, el) => {
$(el).next().hide();
$(el).hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
You should use :checked to select the checked input and negate that with :not(), also to hide the labels you have to loop through all elements and select the next element using .next(), here is a working snippet:
$("#checked_show").click(function () {
if ($("input[type='checkbox']:checked").length) {
$("input[type='checkbox']:not(:checked)").each(function (idx, el) {
$(el).next().hide();
$(el).hide();
});
} else {
console.log('Please select an input!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>

How to set checked radio button using name and attr in jquery?

I am working with some radio input and want to set them checked while edit function. I used ajax response. I have to set them checked.
The code sample is following:
<form>
Group 1:
<input type="radio" name="ans1" str="ans_a" value="1" />
<input type="radio" name="ans1" str="ans_b" value="2" />
<input type="radio" name="ans1" str="ans_c" value="3" />
<input type="radio" name="ans1" str="ans_d" value="4" />
Group 2:
<input type="radio" name="ans2" str="ans_a" value="1" />
<input type="radio" name="ans2" str="ans_b" value="2" />
<input type="radio" name="ans2" str="ans_c" value="3" />
<input type="radio" name="ans2" str="ans_d" value="4" />
Group 3:
<input type="radio" name="ans3" str="ans_a" value="1" />
<input type="radio" name="ans3" str="ans_b" value="2" />
<input type="radio" name="ans3" str="ans_c" value="3" />
<input type="radio" name="ans3" str="ans_d" value="4" />
</form>
I get from ajax response the following:
var ans_name = ans1,ans2,ans3;
var str = ans_c,ans_a,ans_d;
That means i have to set checked the 3rd radio input of gruop 1 and so on.
How can i set checked the corresponding radio button by jquery?
Select based on attribute equals selector and update the checked property.
var ans_name = 'ans1,ans2,ans3';
var str = 'ans_c,ans_a,ans_d';
// split the string into array by ,
var names = ans_name.split(','),
val = str.split(',');
// iterate over names array
names.forEach(function(v, i) {
// generate the selector and get jQuery object using that
$('[name="' + v + '"][str="' + val[i] + '"]')
// update the property
.prop('checked', true);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Group 1:
<input type="radio" name="ans1" str="ans_a" value="1" />
<input type="radio" name="ans1" str="ans_b" value="2" />
<input type="radio" name="ans1" str="ans_c" value="3" />
<input type="radio" name="ans1" str="ans_d" value="4" /> Group 2:
<input type="radio" name="ans2" str="ans_a" value="1" />
<input type="radio" name="ans2" str="ans_b" value="2" />
<input type="radio" name="ans2" str="ans_c" value="3" />
<input type="radio" name="ans2" str="ans_d" value="4" /> Group 3:
<input type="radio" name="ans3" str="ans_a" value="1" />
<input type="radio" name="ans3" str="ans_b" value="2" />
<input type="radio" name="ans3" str="ans_c" value="3" />
<input type="radio" name="ans3" str="ans_d" value="4" />
</form>
Or generate a single selector using Array#map and Array#join methods.
var ans_name = 'ans1,ans2,ans3';
var str = 'ans_c,ans_a,ans_d';
var names = ans_name.split(','),
val = str.split(',');
$(names.map(function(v, i) {
// geneate the selector
return '[name="' + v + '"][str="' + val[i] + '"]';
})
// join the selectors
.join(','))
// update the property
.prop('checked', true)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Group 1:
<input type="radio" name="ans1" str="ans_a" value="1" />
<input type="radio" name="ans1" str="ans_b" value="2" />
<input type="radio" name="ans1" str="ans_c" value="3" />
<input type="radio" name="ans1" str="ans_d" value="4" /> Group 2:
<input type="radio" name="ans2" str="ans_a" value="1" />
<input type="radio" name="ans2" str="ans_b" value="2" />
<input type="radio" name="ans2" str="ans_c" value="3" />
<input type="radio" name="ans2" str="ans_d" value="4" /> Group 3:
<input type="radio" name="ans3" str="ans_a" value="1" />
<input type="radio" name="ans3" str="ans_b" value="2" />
<input type="radio" name="ans3" str="ans_c" value="3" />
<input type="radio" name="ans3" str="ans_d" value="4" />
</form>
Explode names and value with data what you get from response and check through loop and you will get radio checked with the correct answer.
var ans_name = "ans1,ans2,ans3";
var str = "ans_c,ans_a,ans_d";
var checkbox_names = ans_name.split(",");
var values = str.split(",");
$(checkbox_names).each(function(index, value){
$("[name='"+value+"'][str='"+values[index]+"']").prop("checked",true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
Group 1:
<input type="radio" name="ans1" str="ans_a" value="1" />
<input type="radio" name="ans1" str="ans_b" value="2" />
<input type="radio" name="ans1" str="ans_c" value="3" />
<input type="radio" name="ans1" str="ans_d" value="4" />
Group 2:
<input type="radio" name="ans2" str="ans_a" value="1" />
<input type="radio" name="ans2" str="ans_b" value="2" />
<input type="radio" name="ans2" str="ans_c" value="3" />
<input type="radio" name="ans2" str="ans_d" value="4" />
Group 3:
<input type="radio" name="ans3" str="ans_a" value="1" />
<input type="radio" name="ans3" str="ans_b" value="2" />
<input type="radio" name="ans3" str="ans_c" value="3" />
<input type="radio" name="ans3" str="ans_d" value="4" />

Localhost and Webhost errors

This code works on online compilers as well as stackoverflow but why not on my web host as well as localhost.
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});</script></head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" /></body>
</html>
Your head and body tags are intermingled. I've updated it to correctly show the head and body sections.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
</script>
</head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" />
</body>
</html>
Your Javascript is running too early, before any HTML elements (your radio buttons) are present. Your selector $('.radiogroup') then does not find anything, and nothing happens when you click the radio buttons.
Either move your Javascript at the end before the </body> closing tag or wrap your code in jQuery's .ready like so:
$(document).ready(function(){
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
})
Your head and body tags are intermingled and if u want to use html5 you don't need to define the script-type, and you don't have to declare not-closed-tags with trailing backslash.
If you want to use an earlier version of html use the type.
If you want to use xhtml you have to use trailing backslashes for not-closed-tags.
Edit: I figured out, that your code is triggered before the Elements are rendered, so you try to add a event-handler to Elements that are not present at that time. Adding $(function() {}); around your code will force jQuery to run the code after document-ready event is triggered.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$('.radiogroup').on('change', function() {
$('#amount').val(this.value);
});
});
</script>
</head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5">
<input type="radio" name="radiogroup" class="radiogroup" value="10">
<input type="radio" name="radiogroup" class="radiogroup" value="15">
<input type="radio" name="radiogroup" class="radiogroup" value="20">
<br><br>
<input type="text" name="amount" id="amount">
</body>
</html>

jQuery find input where radio is checked

$().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

JavaScript to create a global radio button for all subsequent radio buttons?

I have this set of labels and radio buttons that look like this:
Entertainment: <input type="radio" name="entertainment" id="entertainment" value="0" checked/>
<input type="radio" name="entertainment" id="entertainment" value="1" />
<input type="radio" name="entertainment" id="entertainment" value="2" /><br />
Radio: <input type="radio" name="radio" id="radio" value="0" checked/>
<input type="radio" name="radio" id="radio" value="1" />
<input type="radio" name="radio" id="radio" value="2" /><br />
Dancing: <input type="radio" name="dancing" id="dancing" value="0" checked/>
<input type="radio" name="dancing" id="dancing" value="1" />
<input type="radio" name="dancing" id="dancing" value="2" /><br />
Music: <input type="radio" name="music" id="music" value="0" checked/>
<input type="radio" name="music" id="music" value="1" />
<input type="radio" name="music" id="music" value="2" /><br />
Television: <input type="radio" name="tv" id="tv" value="0" checked/>
<input type="radio" name="tv" id="tv" value="1" />
<input type="radio" name="tv" id="tv" value="2" /><br />
Film: <input type="radio" name="film" id="film" value="0" checked/>
<input type="radio" name="film" id="film" value="1" />
<input type="radio" name="film" id="film" value="2" /><br />
Theatre: <input type="radio" name="theatre" id="theatre" value="0" checked/>
<input type="radio" name="theatre" id="theatre" value="1" />
<input type="radio" name="theatre" id="theatre" value="2" />
The idea is that the three 'Entertainment' radio buttons at the top control all the radio buttons below. A 'global switch', if you will, to save people time. Does anyone know the necessary JavaScript/jQuery to accomplish this? I can't find a correct example online.
$(':radio[name=entertainment]').change(function() {
$(this).nextAll(':radio[value="'+ this.value +'"]').prop('checked', true);
$(this).nextAll(':radio[value!="'+ this.value +'"]').prop('checked', false);
});
Working sample
Note
ids should be unique.

Categories

Resources