I am trying to monitor the change on a radio group.
I am using topcoat with the following HTML :
<ul class="topcoat-list">
<li class="topcoat-list__item">
<label class="topcoat-radio-button__label">
<input type="radio" name="topcoat" value="1" checked="checked">
<div class="topcoat-radio-button"></div>
Test1
</label>
</li>
<li class="topcoat-list__item">
<label class="topcoat-radio-button__label">
<input type="radio" name="topcoat" value="2">
<div class="topcoat-radio-button"></div>
Test2
</label>
</li>
<li class="topcoat-list__item">
<label class="topcoat-radio-button__label">
<input type="radio" name="topcoat" value="3">
<div class="topcoat-radio-button"></div>
Test3
</label>
</li>
</ul>
For a reason I don't quite get, the checked attribute does not get updated when the use selects another radio button...
I would like to be able to monitor the change with javascript, but right now, I can't get the value of the radio group...
$('input[name=topcoat]').change(function(){ changed() });
function changed() {
id = $('input[name=topcoat]').val();
alert(id);
}
Please try this way and i hope it will solve your problem :
<script type="text/javascript">
$(function(){
$('input[name="topcoat"]').change(function(){ changed() });
function changed() {
id = $('input[name="topcoat"]:checked').val();
alert(id);
}
});
</script>
Related
I am trying to style some radio buttons so that when you click the div, it selects the radio button inside the div.
At the moment, when you click the third div in the list for example, it selects the first div's input. These all have the same ID as it's been written in a razor foreach loop.
here is the HTML generated
<div id="world-container" class="d-flex">
<div class="button-styles image-item">
<input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="1">
<label for="CityTypeId">Urban</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="2">
<label for="CityTypeId">Countryside</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="3">
<label for="CityTypeId">Coastal</label>
</div>
</div>
This is the jquery I'm trying to use to select the closest radio button inside that div
$(".button-styles").on("click", function () {
$(this).children('#CityTypeId').prop('checked', true);
});
I can't change the way this HTML is written due to the MVC foreach loop.
Any suggestions or advice how to get around this would be great.
Many thanks in advance
An id should be unique throw a document , you did semantic error by duplicating ids ,
for your issue use classes instead : ( you've already predifined class )
$(this).find('input.city-type-radio').prop('checked', true);
See snippet below :
$(".button-styles").on("click", function () {
$(this).find('input.city-type-radio').prop('checked', true);
});
.image-item {
border:1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="world-container" class="d-flex">
<div class="button-styles image-item">
<input class="city-type-radio" id="cityTypeId1" name="CityTypeId" type="radio" value="1">
<label for="cityTypeId1">Urban</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="cityTypeId2" name="CityTypeId" type="radio" value="2">
<label for="cityTypeId2">Countryside</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="cityTypeId3" name="CityTypeId" type="radio" value="3">
<label for="cityTypeId3">Coastal</label>
</div>
</div>
$(this).find('input').prop('checked', true);
ID has to be unique, that's the reason why your code don't work. Try to target input directly.
$(this).children('input').prop('checked', true);
I'm new to coding. Currently I'm working on templates for an online software. The user will be able to choose an option with a radio button. But the user shouldn't be redirected to the certain page linked to the radio button before the continue button gets clicked.
I can't include the entire code section, because it's for a company.
Info: The colors are just examples, because I can't use the original definitions for document names and classes/id's.
<!-- begin radio buttons-->
<div class="panel-default" id="panel-color">
<div class="panel-body"><strong>color</strong></div>
<div class="radio-buttons-color">
<ul class="radio-buttons-left">
<li>
<input type="radio" name="radio" id="radio-yellow">
<label for="radio2">yellow</label>
</li>
<li>
<input type="radio" name="radio" id="radio-blue">
<label for="radio2">blue</label>
</li>
<li>
<input type="radio" name="radio" id="radio-green">
<label for="radio2">green</label>
</li>
</ul>
<ul class="radio-buttons-right">
<li>
<input type="radio" name="radio" id="radio-red">
<label for="radio2">red</label>
</li>
<li>
<input type="radio" name="radio" id="radio-purple">
<label for="radio2">purple</label>
</li>
<li>
<input type="radio" name="radio" id="radio-orange">
<label for="radio2">orange</label>
</li>
</ul>
</div>
</div>
</div>
<!-- end radio buttons -->
When the radio button with the label "yellow" is selected for example, the user should be redirected to the html document, which contains the yellow colored pictures. But the user should see this page after he/she clicks the continue button.
You can do the above using JavaScript. Record the onclick event on the List items you have created to capture the colour on which click has happened. Create a button and redirect the url to that colour url.
<div class="panel-default" id="panel-color">
<div class="panel-body"><strong>color</strong></div>
<div class="radio-buttons-color">
<ul class="radio-buttons-left" onclick="clicked(event)">
<li>
<input type="radio" name="radio" id="radio-yellow" >
<label for="radio2">yellow</label>
</li>
<li>
<input type="radio" name="radio" id="radio-blue">
<label for="radio2">blue</label>
</li>
<li>
<input type="radio" name="radio" id="radio-green">
<label for="radio2">green</label>
</li>
</ul>
<ul class="radio-buttons-right" onclick="clicked(event)">
<li>
<input type="radio" name="radio" id="radio-red">
<label for="radio2">red</label>
</li>
<li>
<input type="radio" name="radio" id="radio-purple">
<label for="radio2">purple</label>
</li>
<li>
<input type="radio" name="radio" id="radio-orange">
<label for="radio2">orange</label>
</li>
</ul>
</div>
</div>
<a href="" onclick="redirect()"><button>
Continue
</button></a>
<script>
var url = ""
function clicked(e) {
console.log(e.target.id);
url = e.target.id;
}
function redirect() {
console.log(url)
window.location.href = url;
}
</script>
Refer to https://jsfiddle.net/2kmjudLw/1/ for live demo.
You can try to pass the radio button id to the next page by passing the query parameter and you can handle the page color in the next page by getting the value from the queryparameter.
<button onclick="redirectPage()">Click me</button>
<script>
function redirectPage() {
var checkedRadioBox=document.querySelector('input[name=radio]:checked');
if(checkedRadioBox!=undefined){
location.href= "https://www.google.com?q="+checkedRadioBox.id;
}
}
</script>
Code for selecting color. Here we assume that the pages name are same as color name.
$("input[name='radio']").on('click', function(){
var id = $(this).attr('id');
var color = id.split("-");
window.location = color[1];//Add page extension here e.g. .php, .html
})
Code for getting back to the page
<a id="continue" href="">continue</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$('#continue').attr('href', document.referrer);
</script>
it is very dependent on your framework, but basically it can be implemented with:
let radios = document.querySelector('[name=radio]'); //get all radio inputs
[].forEach.call(radios, (radio)=>{
radio.addEventListener('click', (e)=>{
let url = e.target.value; // you need to assign redirect url to value attribute for example (<input type="radio" name="radio" id="radio-yellow" value="http://stackoverflow.com">)
let confirm = confirm('confirm redirect?'); //built in javascript confirmation modal, returns true if user click OK
confirm && window.location.href = url; //redirect if ok
}); //bind event callback on click to radio button
}); //iterate over radio buttons and set callback function to it
I cannot make the input name same or value same. The second and third inputs come from a loop using c# razor. I have 2 sets of radio inputs first one is one set and second and third are another set. Because the second and third have the same name, checking one makes the other unchecked. I want the same for all of them together so it would be like I have one set of 3 radio buttons. Like I said above I am not able to make the name or value same due to back-end data display issue. Here is my attempt below.
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
<script>
$(document).ready(function () {
if ($('#dcenter-listradio').prop("checked", true)) {
$('#dcenter-allradio').prop("checked", false);
}
if ($('#dcenter-allradio').prop("checked", true)) {
$('#dcenter-listradio').prop("checked", false);
}
});
</script>
If you can give them all the same class, then you can just use jQuery to detect when a change has occurred and then uncheck other items in the same class.
$(document).ready(function() {
var selector = ".groupTogether";
// or if you can't give same class, you could use "#unrelatedRadio, input[name='related']"
$(selector).change(function()
{
if(this.checked)
{
$(selector).not(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="unrelatedRadio" name="unrelated" type="radio" class="groupTogether">unrelated</input>
<input id="relatedA" name="related" type="radio" class="groupTogether">Related A</input>
<input id="relatedB" name="related" type="radio" class="groupTogether">Related B</input>
Or, if you can't give them the same class, just replace the selector with something that selects both sets (in my example, "#unrelatedRadio, input[name='related']")
let radios = document.querySelectorAll("input");
for (let i of radios){
i.name="same"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
Hi I'm trying to create a simple quiz. I'm new to jQuery so apologies if it looks daft.
But it's not working. If the user selects q1b...the correct answer...jQuery will disable the remaining radio buttons.
html form:
<div class="quiz">
<ul class="no-bullet" id="question1">
<li><input type="radio" name="q1" id="q1a"> <label for="q1a">Incorrect</label></li>
<li class="answer"><input type="radio" name="q1" id="q1b"> <label for="q1b">Correct</label></li>
<li><input type="radio" name="q1" id="q1c"> <label for="q1c">Incorrect</label></li>
</ul>
</div>
and the jQuery:
$(document).ready(function(){
//If user selects q1b which is the correct answer...
//all other radio buttons will be disabled
$('#question1').click(function() {
if($('#q1b').is(':checked'))
{
//disables radio button q1a and radio button q1c
$("input[type='radio' id="q1a" && "q1c").removeAttr("disabled");
}
});
});
You can try this : register click event handler for .answer radio button and inside it disable all other sibling radio button using .prop()
$(document).ready(function(){
//If user selects q1b which is the correct answer...
//all other radio buttons will be disabled
$('li.answer input[type="radio"]').click(function() {
//disable all other radio button
$(this).closest('ul').find('input[type="radio"]').not(this).prop('disabled',true);
});
});
$(document).ready(function(){
$('li.answer input[type="radio"]').click(function() {
$(this).closest('ul').find('input[type="radio"]').not(this).attr('disabled',true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="quiz">
<ul class="no-bullet" id="question1">
<li><input type="radio" name="q1" id="q1a"> <label for="q1a">Incorrect</label></li>
<li class="answer"><input type="radio" name="q1" id="q1b"> <label for="q1b">Correct</label></li>
<li><input type="radio" name="q1" id="q1c"> <label for="q1c">Incorrect</label></li>
</ul>
</div>
I have an unordered list that has a radio button. I want to get the ID of the checked radio button.
Here's the HTML:
<ul class="class1">
<li>
<label id="id1">
<input id="id1A" type="radio" value="2" name="name1" onchange="say(); return false;">
<span class="className1">Some Text1</span>
</label>
</li>
<li>
<label id="id2">
<input id="id2A" type="radio" value="1" name="name1" onchange="say(); return false;">
<span class="className1">Some Text2</span>
</label>
</li>
</ul>
<ul class="class2">
<li>
<label id="id21">
<input id="id21A" type="radio" value="2" name="name2" onchange="say(); return false;">
<span class="className21">Some Text21</span>
</label>
</li>
<li>
<label id="id2">
<input id="id22A" type="radio" value="1" name="name2" onchange="say(); return false;">
<span class="className21">Some Text22</span>
</label>
</li>
</ul>
And here is the Javascript:
<script type="text/javascript">
function say() {
var firstChild = document.getElementsByClassName('class1');
firstChild = Array.prototype.slice.call(firstChild);
for(var j =0; j < parent.length; j++){
var firstChildElem = firstChild;
for (var x = 0; x < secondChild.length; x ++) {
if (secondChild[x].checked) {
alert("You checked " + secondChild[w]);
}
}
}
</script>
But this script doesn't work.
I would suggest using jQuery to do this kind of thing. The solution for jQuery would be as simple as this:
$("input:radio[name=name1]:checked").val();
Where name1 would be substituded for name2. Not sure what you mean with SelectedIndex though. Dropdownlists have selectedindexes, but a radiobutton is either checked or not...
The easiest way:
1. Change onchange="say(); to onchange="say('CURRID');
2. New Javascript:
<script type="text/javascript">
function say(currID){
alert("You checked: " + currID);
}
</script>
Then, if you don't need the id="id1A" parts of the input tags anymore, you can delete these parts.