I have checked the following question : How to output the price when clicking the radio button?
But it didn't help me with solution, that's why I am posting similar question.
I have two radio check boxes. One offers Silver plan and the other Gold plan. If the user clicks Silver Plan that the Total price will be $499.
I don't understand how to best achieve it.
<div class="plan-wrapper">
<label id="silver-plan"><input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" value="$699"/> Silver Plan</label>
<label id="silver-plan-price">$699</label>
<label id="gold-plan"><input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" value="$999"/> Gold Plan</label>
<label id="gold-plan-price">$999</label>
</div>
<div class="wrapper-b">
<span id="total">Total</span>
<output type="number" name="price" id="output"></output>
<!--<span id="total-price"></span>-->
</div>
JS
<script>
function calculate(obj) {
document.getElementById("output").innerHTML = obj.value;
}
</script>
You need to add value to your inputs...
<input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" **value="$699"**/>
<input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" **value="$999"**/>
First of all you must to set values to your radio.
Then set class or names and grab elements. It could be done using jQuery
All the job could be done too using AngularJs, if you want to use output.
So if I got your question this is the code:
jQuery(document).ready(function(){
$(document).on("click", ".planClass", function(e){
if($(this).is(':checked')){
$("#output").html($(this).val());
}
});
});
see at JSfeedle http://jsfiddle.net/4tafnwcj/1/
First of all, your radio buttons does not have the value attribute, so obj.value won't work.
Take a look here: Get Radio Button Value with Javascript
i think you missed the value for each input:
function calculate(obj) {
document.getElementById("output").innerHTML = obj.value;
}
<div class="plan-wrapper">
<label id="silver-plan"><input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" value="699"/> Silver Plan</label>
<label id="silver-plan-price">$699</label>
<label id="gold-plan"><input class="btn-checkbox" type="radio" name="groupnine" onclick="calculate(this);" value="999"/> Gold Plan</label>
<label id="gold-plan-price">$999</label>
</div>
<div class="wrapper-b">
<span id="total">Total</span>
<output type="number" name="price" id="output"></output>
<!--<span id="total-price"></span>-->
</div>
Related
I have a HTML form that has 2 groups of radio buttons. I need the first group to also change the selection on the second group, i.e.
Group 1 has options A & B, Group 2 has options C & D;
when I select A, I need the form to also select C; when I select B, I need the form to also select D.
I need A & C selected by default when the page loads.
A & C will always be paired; B & D will always be paired.
I know this sounds impractical, but the reason is that this form is sending its responses to another provider's form where I can't edit the fields. They have effectively got a duplicate question in their form (same question just slightly different wording), and I don't want my users to have to answer the same question twice, so I would hope to hide the buttons for C & D from view.
The "name" on the each group is different, and the "value" & "id" for each radio button is unique.
Can this be done? JQuery & JS solutions are welcome.
<label for="buyer-select">
<div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>
<label for="agent-select">
<div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">
<label class="label-text" for="buyer">Buyer</label>
<input type="radio" name="agent" id="buyer" value="false">
<label class="label-text" for="agent">Agent</label>
<input type="radio" name="agent" id="agent" value="true">
Simply set the checked property of the corresponding button.
document.getElementById("buyer").checked = true;
document.getElementById("buyer-select").addEventListener("click", function() {
document.getElementById("buyer").checked = true;
});
document.getElementById("agent-select").addEventListener("click", function() {
document.getElementById("agent").checked = true;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="buyer-select">
<div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>
<label for="agent-select">
<div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">
<br>
<label class="label-text" for="buyer">Buyer</label>
<input type="radio" name="agent" id="buyer" value="false">
<label class="label-text" for="agent">Agent</label>
<input type="radio" name="agent" id="agent" value="true">
You can also replace the second set of radio buttons with a single hidden input. Put the values that would have been sent by the radio button into the value of the hidden input.
document.getElementById("buyer-select").addEventListener("click", function() {
document.getElementById("buyer-agent").value = "false";
});
document.getElementById("agent-select").addEventListener("click", function() {
document.getElementById("buyer-agent").value = "true";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="buyer-select">
<div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>
<label for="agent-select">
<div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">
<input type="hidden" name="agent" id="buyer-agent" value="false">
Is this what you wanted:
If yes, try this code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
$('input[type=radio][name="pet"]').change(function() {
var $radiobutton = $("input[value='"+$(this).val()+"']");
$radiobutton.prop("checked", true);
});
$('input[type=radio][name="pet2"]').change(function() {
var $radiobutton = $("input[value='"+$(this).val()+"']");
$radiobutton.prop("checked", true);
});
}, false);
</script>
</head>
<h2>Select a Pet</h2>
<div>
<input name="pet" type="radio" value="dog" /><span>Dog</span>
<input name="pet" type="radio" value="cat" /><span>Cat</span>
<input name="pet" type="radio" value="fish" /><span>Fish</span>
</div>
<div>
<input name="pet2" type="radio" value="dog" /><span>Dog</span>
<input name="pet2" type="radio" value="cat" /><span>Cat</span>
<input name="pet2" type="radio" value="fish" /><span>Fish</span>
</div>
I have a donation page using Liquid Shopify. I CANNOT change name="donation[amount_option]" (I do not have access to that file) so I need code that allows this to stay.
I want to have $250 automatically checked on load
My code
document.querySelector('input[name="donation[amount_option]"][value=250]').checked = true;
<div class="radio-inline donation-v2-amounts padbottommore">
<span>
<input id="donation_amount_25" type="radio" name="donation[amount_option]" class="donation_amount_option" value="25">
<label for="donation_amount_25" class="radio">$25</label>
</span>
<span>
<input id="donation_amount_250" type="radio" name="donation[amount_option]" class="donation_amount_option" value="250">
<label for="donation_amount_250" class="radio">$250</label>
</span>
<span>
<input id="donation_amount_1000" type="radio" name="donation[amount_option]" class="donation_amount_option" value="1000">
<label for="donation_amount_1000" class="radio">$1,000</label>
</span>
</div>
$(document).ready(function(){
$('#donation_amount_250').prop('checked',true);
});
If you need a pure js alternative (in addition to the answer above). You can select by value:
document.querySelector('input[value="250"]').checked = true;
EDIT:
In case it isn't clear, you can use any valid selector such as the id, i.e.:
document.querySelector('#donation_amount_25').checked = true;.
Just add the "checked" keyword to the end of the input.
<input id="donation_amount_250" type="radio" name="donation[amount_option]" class="donation_amount_option" value="250" checked>
I have 2 radio-buttons and a checkbox.
When the first option is "personalized" the checkbox "hidden" should be automatically checked.
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
I've made this script, but it is not working:
jQuery(document).ready(function () {
if ( $('.personalized input').val() = "personalized" ) {
$('.checkbox input').attr('checked');
}
});
You have few problems. As others already pointed out, you are checking document.ready instead of onChange event. So it checks on page load, instead of checking on radio button state change.
Another problem is that you are checking $('.personalized input') value, but you do not have personalized class in your html.
Your radio buttons have common class form-radio. So you can use it as a selector.
$('.form-radio').on("change", function(){
if ( $(this).val() == "personalized" ) {
$('.form-checkbox').prop('checked', true);
}
else{
$('.form-checkbox').prop('checked', false);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
This part:
else{
$('.form-checkbox').prop('checked', false);
}
you only need if you want to un-check if not personalized.
Also take care of .prop() which is used for jQuery 1.6+. For lower versions use .attr()
You have to specify when do you want the script to check if the radio is checked or not. If you use just document.ready() function, it will check it only once, when the site is loaded and since it's not checked - the checkbox won't be checked neither.
You can use following approach: check it with every click event on the radio button.
$('.personalized').click(function() {
if ($(this).is(':checked')) {
$('.checkbox').attr('checked', 'checked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' class='personalized'>
<input type='checkbox' class='checkbox'>
Simply you need to do it in ready function
jQuery(document).ready(function () {
if ($(".personalized").is(":checked") ) {
$('.checkbox').attr('checked', 'checked');
}
});
if you want them to apply on page load.
You have several problems here:
The code as written only runs on page load. Since you said you want the checkbox to be "automatically" checked, you should attach a change handler to the radio array.
.val() called on a radio array returns the value of the first element in the selected set, regardless of which one is checked. You need to add :checked to your selector to filter down to the one selected radio element.
Your single equals sign is the assignment operator and should be replaced with ===.
.attr('checked') returns the value of the checked attribute. There are actually two problems here: attr only looks at the attribute initially assigned to the element; you need to use prop instead to update the checked property. The second problem is that the one-parameter attr function is used to read the attribute. You want the two-parameter function to set it.
Here's a working example:
jQuery(document).ready(function () {
$('input[name="radio"]').on('change',function(){
if ( $('input[name="radio"]:checked').val() === "personalized" ) {
$('#hidden').prop('checked','checked');
} else {
$('#hidden').prop('checked','');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radio" id="personalized" value="personalized"/><label for="personalized">personalized</label><br/>
<input type="radio" name="radio" id="general" value="general"/><label for="general">general</label><br/>
<input type="checkbox" id="hidden" name="hidden"/><label for="hidden">hidden</label>
I have two radio buttons. When I click on one, the other should become unchecked, and vice versa.
The code I've produced so far is not working:
<input type="radio" id="rbdemail" onclick="chekrbdclick()" checked="checked" />
<input type="radio" id="rbdsitelnk" onclick="chekrbdclick()" />
function chekrbdclick()
{
// How to manage here?
}
Simple, just use a 'name' property with the same value for both elements:
<html>
<body>
<form>
<input type="radio" name="size" value="small" checked> Small
<br>
<input type="radio" name="size" value="large"> Large
</form>
</body>
</html>
hope it helps
<form>
<label>
<input type="radio" name="size" value="small" checked> Small
</label>
<br>
<label>
<input type="radio" name="size" value="large"> Large
</label>
</form>
Give them a name attribute with common value like size, and it will work. For best practice, you can place your input tag inside a label tag, so that, even if your user clicks on the text beside the button (ie on "Small" or "Large"), the respective radio button gets selected.
The perfect answer is above answered ,but I wanna share you how it can work by javascript ,this is javascript work (not standard answer) ....
<input type="radio" id="rbdemail" onclick="chekrbdclick(0)" checked="checked" value="Small" />Small<br>
<input type="radio" id="rbdsitelnk" onclick="chekrbdclick(1)" value="Large" />Large
<script>
function chekrbdclick(n)
{
var small = document.getElementById('rbdemail');
var large = document.getElementById('rbdsitelnk');
if(n === 0){
small.checked = true;
large.checked = false;
}
else {
small.checked = false;
large.checked = true;
}
}
</script>
I was trying to change the text of a submit button on change of radio button .My code for html part is :
<input type="radio" onclick="check()" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment1" value="Yes"/>
<label for="segment1" id="controls">
<span class="ui-btn-text-controls">Yes</span>
</label>
<input type="radio" onclick="check()" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment2" value="No" checked="checked"/>
<label for="segment2" id="controls">
<span class="ui-btn-text-controls">No</span>
</label>
<input type="submit" value="send" name="sendbutton" id="sendbutton"/>
My javascript code is as follow :
function check(){
var x;
x=document.f1.radio-view;
if(x[0].checked){
document.f1.sendbutton.value="PROCEED";
}
else if(x[1].checked){
document.f1.sendbutton.value="SEND";
}
}
But its not changing the test.What can be the reason for it?
If you decide to address elements directly, use their names properly:
var x = document.f1['radio-view'];
... as you cannot access with the dot syntax the properties which names are not valid identifiers. document.f1.radio-view is treated as document.f1.radio - view, which apparently makes no sense.
But actually, I'd rather skip this part completely: if radio-button is clicked, it's definitely set as checked. So this...
<input type="radio" onclick="check(this)" ... />
...
function check(button) {
document.f1.sendbutton.value = button.value === 'Yes' ? 'PROCEED' : 'SEND';
}
... should be quite enough, as this demo shows.
See Demo here: http://jsfiddle.net/Tngbs/
//HTML
<form>
<fieldset id="SPserviceStatus" data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Group<span class="required">*</span></legend>
<input type="radio" name="ss" id="s1" value="Yes">
<label for="serviceStatus1">Yes</label>
<input type="radio" name="ss" id="s2" value="No" checked="checked">
<label for="serviceStatus2">No</label>
</fieldset>
<input type='submit' id='submitBtn' value='SUBMIT' />
</form>
//JS
$("#s1").click(function () {
document.getElementById("submitBtn").value = "Yes Clicked";
return false;
});
$("#s2").click(function () {
document.getElementById("submitBtn").value = "No Clicked";
return false;
});