<label class="radio inline">
<input type="radio" name="drivesize" id="drivesize" value="250 GB" required>250GB
</label>
<label class="radio inline">
<input type="radio" name="drivesize" id="drivesize" value="500 GB">500GB
</label>
I have the above bit of html in my webpage and I'd like to add the following if the 500GB radio button is selected.
<label class="checkbox inline">
<input type="checkbox" name="mappings" id="mappings" value="Done" required>Done
</label>
Can anybody tell me the best to do this?
Just a note: you should not use duplicate IDs (see #drivesize). IDs should be unique while classes can be reused. If you change your IDs, it can be easier to check.
Here's a bit of jQuery that should allow you to check for if the box is checked. We will assume that you changed the 500GB ID to largeDrive, the Done button is hidden from view, and you have an event handler on the radio buttons.
if ($('input#largeDrive').is(':checked')) {
$('input#mappings').show(); //assuming it was hidden
}
Related
I'm trying to target the content and making the entire input fields hidden or disable specifically the field "Pickup in Store : $0.00".
I can only get the radio button to be hidden but not the text beside the radio button. I know the Labels are global containers but I can see the input fields has a unique ID. Is there a way we can accomplish this e.g. CSS, Javascript or Jquery?
<div class="shopping-basket-shipping-methods" data-shopping-basket-id="35838">
<label class="user-form-field-label">
<input class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_932" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="932">
Canada Post - Ground : $20.00
</label><br>
<label class="user-form-field-label">
<input checked="checked" class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_915" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="915">
<p>Pickup in Store : $0.00</p>
</label><br>
</div>
Personally I see three options;
Wrapping both elements in a single div and targeting them together (most straight foward)
Targeting the previous sibling as well (not difficult with css)
Assigning the label an equally descriptive and dynamic id for easier targeting (might require a bit of extra work)
You shouldn't use the label element to wrap the radio and the text.
<div class="form-control">
<label for="option1">Option 1 description</label>
<input type="radio" name="shopping" id="option1" value="option1">
</div>
<div class="form-control">
<label for="option2">Option 2 description</label>
<input type="radio" name="shopping" id="option2" value="option2">
</div>
If you want to relate some text to an input field you can simply add a label element as a sibling of the input element and relate them with the for attribute matching the input's id that's going the make the html structure more solid, you can also use an extra class or add an id for the form-controls div to make it easier to select or if you are already using jQuery you can target these elements parent with something like $('#option1').parent()
No need to hide all the label simply hide its content considering the ID of the input:
#shopping_baskets_attributes_35838_shipping_method_id_915,
#shopping_baskets_attributes_35838_shipping_method_id_915 + *{
display:none;
}
<div class="shopping-basket-shipping-methods" data-shopping-basket-id="35838">
<label class="user-form-field-label">
<input class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_932" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="932">
Canada Post - Ground : $20.00
</label><br>
<label class="user-form-field-label">
<input checked="checked" class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_915" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="915">
<p>Pickup in Store : $0.00</p>
</label><br>
</div>
I would like to check only one radio button but in my code both radio buttons get selected.
Here is my code its in netsuite.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level_1" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
here is the link of the site http://shopping.sandbox.netsuite.com/act
Please make the "name" of the radios be same for all.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
My HTML part is below:
<input id="yes" save-value="yes" value="no" name="view_y" class="switch-input yes" type="radio">
<label checked="checked" class="switch-label switch-label-off selected" for="yes">Yes</label>
<input id="no" save-value="no" value="no" name="view_n" class="switch-input no" type="radio">
<label class="switch-label switch-label-on" for="no">No</label>
<span class="switch-selection"></span>
When I click each button checked="checked" and selected options will be changing from yes to no labels.
With these options, how can I get the save-value of selected radio button. Since, am using Handlebars js (json) on my value option I want to get the save-value of selected radio button.
How an I do that?
Assuming the class switch-input is assigned to only these two input elements, you can use it along with the checked selector
var value = $('input.switch-input').filter(':checked').attr('save-value');
//or var value = $('input.switch-input:checked').attr('save-value');
Note: Prefer to use data-* attributes to store custom attributes
I think the radio buttons are not actually getting checked, only the labels attributes are changed so, add a additional class to the labels like myclass
<input id="yes" save-value="yes" value="no" name="view_y" class="switch-input yes" type="radio"/>
<label checked="checked" class="myclass switch-label switch-label-off selected" for="yes">Yes</label>
<input id="no" save-value="no" value="no" name="view_n" class="switch-input no" type="radio"/>
<label class="myclass switch-label switch-label-on" for="no">No</label>
<span class="switch-selection"></span>
then
var value = $('.myclass[checked="checked"]').prev('input').attr('save-value');
console.log(value)
First, your radio buttons should have the same name attribute, say view, so that the browser will restrict selection to only one of them. Then, you can use $('[name="view"]:checked').val() to capture the value of the radio button that is selected.
You have some errors in your HTML code, you put the checked attribute on the wrong tag, look in this example:
$('body').on('change','input',function() {
$('.switch-selection').html($(this).attr('save-value'));
});
http://jsfiddle.net/9Pj3g/2/
say i have the following three options and each with a radio button beside
London
Newyork
Dubai
I need jQuery that when the user clicks on the word the radio button selects!
This is a built-in feature in HTML, so no need for JavaScript. Simply use the label tag like this:
<label><input type="radio"> London</label>
<label><input type="radio"> New York</label>
<label><input type="radio"> Dubai</label>
Two ways:
<label for="london"><input type="radio" id="london"> London</label>.
Use label's for attribute similar to radio's id.
<label><input type="radio" > London</label>
Place the radio within label.
Very basic HTML.
You can use the label tag:
<input id="emptyacct" type="radio" name="account" value="radiobutton" />
<label for="emptyacct">Yes </label>
It's just HTML ;)
<input id="input_london" type="radio" name="london" value="radiobutton" />
<label for="input_london">London</label>
<input id="input_ny" type="radio" name="ny" value="radiobutton" />
<label for="input_ny">New York</label>
...
I have a gender selection radio:
<div class="label-inputs" name="userFieldDiv" id="genderUserFieldDiv">
<label class="required">Sexo</label>
<input type="radio" class="check" value="F" name="userDto.gender" id="userDto.gender0">
<label for="userDto.gender0">Femenino</label>
<input type="radio" class="check" checked="checked" value="M" name="userDto.gender" id="userDto.gender1">
<label for="userDto.gender1">Masculino</label>
</div>
I'm trying to use a jQuery script to get the selected radio and paste it inside of a label.
$("#userDto\\.gender").change(function() { $("#genderLabel").html(this.value); });
The problem is that I'm using Spring, and when I use formRadioButton, it generates the id: userDto.gender but adds a 0 and 1 to the options. So I'm out of ideas about how to make the next HTML to get the value of the selected radio.
<div name="userLabelDiv" id="genderUserLabelDiv">
<label class="required">Sexo</label>
<label id="genderLabel">Masculino</label>
</div>
Could someone guide me through the problem? I can't find where is my error in the JS code. Thank you
The ids must be unique so what Spring is doing is just fine. Just use the name attribute for the selector instead of the id.
$('input[name="userDto\\.gender"]').change( ... )