I want to make radio buttons disappear and instead of buttons, the label of the radio buttons will be clickable itself and i will change the background color of the selected radio. How can i do this? For example, I have "yes" and "no" labels and these labels will be clickable and there will be no radio buttons at all. These are only changing color of background but showing radio buttons which is not wanted.
Javascript
$(document).ready(function(){
var ok = "green";
var notok = "red";
$.each($(":radio"), function(){
if($(this).prop("checked") == false)
{
$(this).parent().css("background", notok);
}
else
{
$(this).parent().css("background", ok );
}
})
$(":radio").click(function(){
$("[name='"+$(this).prop("name")+"']").parent().css("background", notok);
$(this).parent().css("background", ok );
})
})
HTML
<FORM name="form1">
<div>
<input type="radio" id="yes" name="q"checked="checked"/> Yes
</div>
<div>
<input type="radio" id="no" name="q"/>No
</div>
</FORM>
Thanks
This one is actually deceptively easy. If you just use a "label" tag, it will be clickable. Then you can simply hide the radio button.
<input id="yes" type="radio" name="q" value="radiobutton" style="display:none;" />
<label for="yes">Yes </label>
<input id="no" type="radio" name="q" value="radiobutton" style="display:none;" />
<label for="no">No</label>
btw, here's a JSFiddle of it working: http://jsfiddle.net/scGE9/2/
If I understand what you're asking, I'd hide the radio buttons, then attach a click handler to the labels that changed the background color:
$('label').click(function () {
$('label').removeClass('selected');
$(this).addClass('selected');
});
Here's a jsfiddle to demonstrate.
In short, when a label is clicked, remove the 'selected' class controlling the background color from all relevant labels, and apply it to the one that was clicked.
Related
This question already has answers here:
How to allow only one radio button to be checked?
(8 answers)
Closed 3 years ago.
I have a code that checks if radio buttons are checked and if they are it set background color. It's all working fine, my problem is when I want to select another radio button, result is that all my radio buttons are selected on click but it needs to be just one.
$("input[type='radio']").each(function () {
if ($(this).is(":checked")) {
$(this).css("background", "yellow");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio">
<input type="radio" checked>
You can test this out. Just try to select another radio button, you will see that radio buttons are selected (2 radio buttons).
What I want to achieve is that when you click on another radio button it needs to remove this checked class or any other idea. I can't switch between radio buttons.
Give them the same name:
$("input[type='radio']").each(function() {
if ($(this).is(":checked")) {
$(this).css("background", "yellow");
}
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input type="radio" name="radio">
<input type="radio" name="radio" checked>
Radio button can be easily handle with name attribute below code may help you
<input type="radio" name="color">
<input type="radio" name="color" checked>
$("input[name='color']").each(function () {
if ($(this).is(":checked")) {
$(this).css("background", "yellow");
}
});
<input type="radio" name="sameName">
<input type="radio" name="sameName">
set their name like this way
To achieve the desired behavior with visible background color for each radio button, you could wrap each radio <input /> with a span element which would achieve the visual effect of a background color for the radio buttons:
/* Reusable selection of radio buttons */
const radioButtons = $("input[type='radio']");
/* Updates selected radio button parent backgrounds based on checked state */
function updateBackground() {
radioButtons.each(function() {
$(this).parent().css('background', $(this).is(":checked") ? 'yellow' : '');
});
}
/* Attach click behavior to each causing the background colors to update */
radioButtons.click(updateBackground);
/* Initalise the backgrounds and */
updateBackground();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Wrap each radio button with a span, which will be used to show a colored background
when the radio button is checked -->
<span>
<input type="radio" name="radio-group-name" checked>
</span>
<span>
<input type="radio" name="radio-group-name">
</span>
I have to work with radio input which name will be different so I need to used jquery to remove all the checked radio first and add check only by same name of input radio with matching clicked input name.
I am trying to add checked state in radio button programmatically by using jquery but it is giving an issue on ui. it is not been selected when I clicked but working on form submission.
When i clicked on first radio it will give me following
https://imgur.com/a/1rpkLMv
Here is my jquery code;
camperElement.imageContent.on('click', camperElement.standardRadio, function (e) {
e.preventDefault();
camperElement.hiddenStandard.attr('name',e.target.name);
camperElement.hiddenStandard.val(e.target.value);
camperElement.standardRadio.each(function () {
if ($(this).attr('name') !== e.target.name) {
$(this).removeAttr('checked');
}else{
$(this).prop('checked',true);
$(this).attr('checked','')
$(this)[0].checked = true;
}
});
});
$("#important-radio").prop('checked', true);
Should work, are you sure $(this) is selecting the right element?
Instead of adding click listeners to the images, you can wrap the entire image into a label element
<label>
<img src="https://via.placeholder.com/150" />
#1
<input type="radio" name="myRadio" value="first">
</label>
<label>
<img src="https://via.placeholder.com/150" />
#2
<input id="important-radio" type="radio" name="myRadio" value="second">
</label>
<label>
<img src="https://via.placeholder.com/150" />
#3
<input type="radio" name="myRadio" value="third">
</label>
I am trying to toggle a content DIV base on the selection of radio buttons.
HTML for radio button.
<div class="row-fluid">
<label class="radio">
<input type="radio" name="account" id="yes" value="yes" checked>
Yes, I have an existing account
</label>
<label class="radio">
<input type="radio" name="account" id="no" value="no">
No, I don't have an account
</label>
</div>
Content DIV
<div id="account_contents">
<p>This is account contents.......</p>
</div>
This is how I tried it in jquery.
$('#no').bind('change',function(){
$('#account_contents').fadeToggle(!$(this).is(':checked'));
$('#account_contents').find("input").val("");
$('#account_contents').find('select option:first').prop('selected',true);
});
But it doesn't work for me correctly. Here I want to show this content DIV only if user don't have an account.
Can anybody tell me how to fix this problem?
seems you need .on('change') for radio buttons not just for one of them
$('input[type="radio"][name="account"]').on('change',function(){
var ThisIt = $(this);
if(ThisIt.val() == "yes"){
// when user select yes
$('#account_contents').fadeOut();
}else{
// when user select no
$('#account_contents').fadeIn();
$('#account_contents').find("input").val("");
$('#account_contents').find('select option:first').prop('selected',true);
}
});
Working Example
$(document).ready(function(){
$('.radio input[type="radio"]').on("click", function(){
if($('.radio input[type="radio"]:checked').val() === "yes"){
$("#account_contents").slideDown("slow");
}else{
$("#account_contents").slideUp("slow");
}
});
});
I'm not sure if I got you right, but this fiddle toggles #account_contents depending on which button you click:
This was how i tweaked the script:
$('#no').bind('change',function(){
$('#account_contents').fadeToggle(!$(this).is(':checked'));
$('#account_contents').find("input").val("");
$('#account_contents').find('select option:first').prop('selected',true);
});
$("#yes").bind("change", function() {
$('#account_contents').fadeOut();
});
I am trying to create a simple interactive form for use with touch screen devices. The majority of the form is made up of radio buttons in groups of 5 (approx. 37 groups). I have a label tag for each radio button, and when selected (clicked), the background-color property of the label is changed to a highlighted colour using this JavaScript within each label tag OnClick="this.style.background='#5555ff';"
What I want to add to the above, is a JavaScript that will remove the above if the selection is changed within the group. E.g. A user selected radio button A in group 1, then changes their selection to radio button B in group 1. At the moment, both label backgrounds will be changed to the defined colour.
The HTML form is created dynamically by PHP so radio button names, IDs, & values will differ.
I have been unsuccessful trying to complete this task myself, and there doesn't seem to be a simple OnUnClick="xxx" either. I have searched on here for a solution but no questions match mine, although I have tried tweaking existing solutions to similar problems but to no avail.
Thank you for reading!
Here you go:
HTML
<html>
<body>
<div>
<input type="radio" id="g1v1" name="g1" value="v1" checked="checked"/> <label for="g1v1">V1</label>
</div>
<div>
<input type="radio" id="g1v2" name="g1" value="v2" /> <label for="g1v2">V2</label>
</div>
<div>
<input type="radio" id="g1v3" name="g1" value="v3" /> <label for="g1v3">V3</label>
</div>
<div>
<input type="radio" id="g1v4" name="g1" value="v4" /> <label for="g1v4">V4</label>
</div>
</body>
</html>
Javascript
$(document).ready(function(){
var selectedRadioColor = "yellow";
var normalRadioColor = "gray";
// For changing color while document loads
$.each($(":radio"), function(){
//alert( $(this).prop("id")+ $(this).prop("checked") );
if($(this).prop("checked") == false)
{
$(this).parent().css("color", normalRadioColor);
}
else
{
$(this).parent().css("color", selectedRadioColor );
}
})
// For updating color when user interacts with radio buttons
$(":radio").click(function(){
$("[name='"+$(this).prop("name")+"']").parent().css("color", normalRadioColor);
$(this).parent().css("color", selectedRadioColor );
})
})
Here is the link to jsfiddle for live demo:
http://jsfiddle.net/dharmavir/6UnDs/
assuming your radio buttons are grouped in a divs like this -
<div class="radio-group">
<INPUT TYPE=RADIO NAME="pizzasize" VALUE="S">small<BR>
<INPUT TYPE=RADIO NAME="pizzasize" VALUE="M">medium<BR>
<INPUT TYPE=RADIO NAME="pizzasize" VALUE="L">large<P>
</div>
You can do something like this in jquery -
$('input[type="radio"]').click(function(){
var parentElement = $(this).parent();
parentElement.find('input').css('background', '#000000'); //set to your neutral background for radio buttons
$(this).css('background', '5555ff');
});
How to create a jQuery/javascript function to:
Insert its value into an input box (male/female)
Change its background and the background of its sibling button to show whether it's active?
Here is my HTML for a start:
<input type="button" class="ts" id="female" onclick="???????????" />
<input type="button" class="ts" id="male" onclick="???????????" />
<input class="req-string bx long" type="text" id="gender" name="gender" />
Here is an example which will direct you on the right path. It doesn't do what you are asking, but you will get the idea.
The code below would disable the other button: if you click on "female" it will disable "male" and vice-versa.
$(function() {
$('#female').click(function() {
// place text ("male" or "female") in an input
$('#gender').val('female');
$('#female').css({background:'green'});
$('#male').css({background:'red'});
});
$('#male').click(function() {
// place text ("male" or "female") in an input
$('#gender').val('male');
// emulates the button being toggled
$('#female').css({background:'red'});
$('#male').css({background:'green'});
});
});