I have 2 seperate fields with 4 radio buttons each.
Field nr1 has radio button unchecked by using jquery, field nr2 has the first radio button checked by default.
What i need is, if in field nr1 a radio button is checked, then it checks the same radio button in field nr2.
Here is how my html looks like:
<p class="form-row form-row-wide validate-required" id="billing_piegadatajs_field"><label for="billing_piegadatajs" class="">Piegādes veids <abbr class="required" title="vajadzīgs">*</abbr></label><br>
<input type="radio" name="billing_piegadatajs" value="Pasta Stacija" class="radio" style="width:10%" checked="checked"><span for="billing_piegadatajs">Pasta Stacija</span><br>
<input type="radio" name="billing_piegadatajs" value="Post24" class="radio" style="width:10%"><span for="billing_piegadatajs">Post 24</span><br>
<input type="radio" name="billing_piegadatajs" value="Kurjerdienests" class="radio" style="width:10%"><span for="billing_piegadatajs">Kurjerdienests</span><br>
<input type="radio" name="billing_piegadatajs" value="Saņemt uz vietas" class="radio" style="width:10%"><span for="billing_piegadatajs">Saņemt uz vietas ( Saldū )</span>
</p>
<br>
<tr class="shipping">
<th>Piegādes izmaksas</th>
<td>
<ul id="shipping_method">
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" checked="checked" class="shipping_method">
<label for="shipping_method_0_flat_rate">Pasta Stacijas: <span class="amount">€ 3.50</span></label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_international_delivery" value="international_delivery" class="shipping_method">
<label for="shipping_method_0_international_delivery">Post 24: <span class="amount">€ 3.50</span></label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_apg_shipping" value="apg_shipping" class="shipping_method">
<label for="shipping_method_0_apg_shipping">DLW Kurjeris: <span class="amount">€ 9.00</span></label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup" value="local_pickup" class="shipping_method">
<label for="shipping_method_0_local_pickup">Uz vietas - Saldū (Bez maksas)</label>
</li>
</ul>
</td>
</tr>
I use this jquery to uncheck the field nr1 radio button when page is loaded.
jQuery(document).ready(function(){
jQuery('#billing_piegadatajs_field')
jQuery('#billing_piegadatajs_field').find('input[name="billing_piegadatajs"]').each(function() {
jQuery(this).prop('checked', false);
});
});
Here is a link to jsfiddle
You can acheive this in many many ways
One approach should be considering 2 set of radio
you have 2 sets already :
the first one share the class name 'radio'
the second one share the class name 'shipping_method'
The logic
1) add a click event on all radio of the first set
2) Get the order rank of the one we click on
3) force a click event on the radio button having the same index in the second set
// Track the click on the first set of radio
jQuery('.radio').on('click',function(){
// Get the element index , which one we click on
var indx = jQuery(this).index('.radio');
// Trigger a click on the same index in the second radio set
jQuery('.shipping_method')[indx].click();
})
there is the jsfiddle : http://jsfiddle.net/MMJRk/21/
First you need to find out which box is checked. The following link may help.
In jQuery, how do I select an element by its name attribute?
Then you need to loop through the next check boxes, comparing the value to the value you want for each box. When you find the one you want. Check that one.
Link for how to check box.
How to check a radio button with jQuery ?
Well, i have to admit it is not the most ideal way of getting what you want. But it does the trick: http://jsfiddle.net/veritas87/MMJRk/25/
jQuery('p.form-row input[type=radio]').on('change', function () {
var radioNumber = $(this).index('.radio');
$("ul#shipping_method input[type=radio]:eq(" + radioNumber + ")").prop('checked', true);
});
In short, when a radiobutton changes in p.form-row it will get the index of the clicked radiobutton and it will set the radiobutton in the second list of radiobuttons to checked.
I've updated your jsfiddle and now it works.
Basically, I assigned to each input (and its counterpart), an index using custom data attributes (data-index). I attached an event handler to the first group of inputs, and, based on the index of the checked one, I check the correct radiobutton in the second group:
$('#billing_piegadatajs_field input[type="radio"]').on('change', function() {
if (!this.checked) return;
var index = this.getAttribute('data-index');
$('#shipping_method input[data-index="' + index + '"]').prop('checked', true);
});
Related
I'm having problems getting the radio button value when the form is submitted. I thought that when the form is submitted it would get the final selection that user made but it appears it doesn't recognize which one is selected.
On initial load: This is inside my form
<div id="question1">
<label> Do you shop mostly on-line or at physical stores? </label>
<div class="radioButtons">
<span>
Mostly on-line stores
<input name="question1" value="on-line" type="radio">
</span>
<span>
mostly physical stores
<input name="question1" value="physical" type="radio">
</span>
<span>
About both equaly
<input name="question1" value="both" type="radio">
</span>
</div>
</div>
in my submit handler
$(".aboutmeQuestions").on("submit", function(e){
e.preventDefault();
var values = {};
var $inputs = $(".aboutmeQuestions :input").not(":submit");
$inputs.each(function(){
values[this.name] = {answer : $(this).val()};
});
//I thought the above would get the radio buttons but I think it got the last choice as the selected one no matter what was chosen. so I tried below because I thought that the checked attribute would change automatically.
$("input[type='radio']").each(function(){
console.log("this ",this);
if($(this).attr("checked")){
values[this.name] = {answer : $(this).val()};
}
})
In my EJS:
<div id="question1">
<label> <%=aboutUser.question1.question%> </label>
<div class = "radioButtons">
<span>Mostly on-line stores <input type="radio" name="<%=aboutUser.question1.name%>" value="on-line" <% if(aboutUser.question1.answer == "on-line"){%> checked <%}%>> </span>
<span>mostly physical stores <input type="radio" name="<%=aboutUser.question1.name%>" value="physical" <% if(aboutUser.question1.answer == "physical"){%> checked <%}%>> </span>
<span> About both equaly <input type="radio" name="<%=aboutUser.question1.name%>" value="both" <% if(aboutUser.question1.answer == "both"){%> checked <%}%> ></span>
</div>
</div>
I tested it out. After clicking on nothing and pressing the submit button I get for values object, question5[answer]: maybe" question1[answer]: "both" that should of been equal to nothing. It is always like that no matter what I click. I don't like that pleas help me fix it. I didn't think I have to use a change method.
Ps I save this data to DB and the inputs should be populated with answers so when I reload the page <span>
About both equaly<input name="question1" value="both" checked="" type="radio">
</span>. it shouldn't have been checked since I didn't select anything.
First, remove the checked attribute from all the checkboxes unless there is ONE that you want to be pre-selected and in that case add it to just that ONE.
There is no need to loop through the radio buttons to see which was checked. Just use the :checked pseudo-class. Change this:
$("input[type='radio']").each(function(){
console.log("this ",this);
if($(this).attr("checked")){
values[this.name] = {answer : $(this).val()};
}
})
to this:
var checkedRad = $("input[type='radio']:checked");
values[this.name] = {answer : checkRad.value};
or, if you don't need a reference to the checked radio button after getting its value::
values[this.name] = {answer : $("input[type='radio']:checked")};
$("input[type=radio]").on("click", function(e){
console.log($("input[type='radio']:checked").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="question1">
<label> Do you shop mostly on-line or at physical stores? </label>
<div class="radioButtons">
<span>
Mostly on-line stores
<input name="question1" value="on-line" type="radio">
</span>
<span>
mostly physical stores
<input name="question1" value="physical" type="radio">
</span>
<span>
About both equaly
<input name="question1" value="both" type="radio">
</span>
</div>
</div>
i have hidden variable with default value "on" , i want to change the text of another button from Disable to Enable according to this hidden value , if the hidden field value is "on" the button text is "Disable" and vice verse . i have tried but my solution doesn't work
hidden field
<input name="hiddenV" type="hidden" id="hiddenValue<%=ud.getUserId()%>" value="on" />
button
<input type="button" id="delUserButton<%=ud.getUserId()%>" onclick="openDelDiv(<%=ud.getUserId()%>, '<%=ud.getUserName()%>'); change(this.id);" value="Disable"/>
js function
function change(btn) {
var hiddenValue = document.getElementsByName("hiddenV")[0];
var disButton = document.getElementById(btn);
if (hiddenValue.value === "on")
disButton.value = "Disable";
else
disButton.value = "Enable";
}
OpendelDev() : it's a popup dialog like ( are you sure you want to disable this user) with ok button that causes the page to reload
function openDelDiv(userId, userName) {
$("#userId_delete").val(userId);
$("#userName_delete").text(userName);
$("#delUserDiv").bPopup();
}
but put in mind that the button is placed in for loop inside a jsp page so the id for every button will be different
I think you are actually faking a <input type="radio"/> here.
The goal is then to have an input for each possible value, along with a list of buttons to toggle them. Then, all you have to do is show the buttons you want (ie: show "enable" button if status "disabled" is checked and vice-versa).
<input type="radio" class="input-field" name="status" value="enabled" checked="checked" id="a"/>
<input type="radio" class="input-field" name="status" value="disabled" id="b"/>
<ul class="buttons">
<li>
<label class="enabling" for="a">
<button>Enable</span>
</label>
</li>
<li>
<label class="disabling" for="b">
<span>Disable</span>
</label>
</li>
</ul>
In CSS:
.input-field[value="enabled"]:checked ~ ul.buttons label.enabling,
.input-field[value="disabled"]:checked ~ ul.buttons label.disabling {
display: none;
}
(not actually run & tested, but the spirit is there)
i want to select an input by his value.
the problem is that i got a 4 radio inputs
and when the user clicks "next" it saves the value of that answer in AnsW array.
and when the user clicks "back" i want the input radio button with the value that i have in my AnsW array to be checked, so the user can know what he has selected and change his answer to something else.
html code:
<ul>
<li class="li0">
<input type="radio" value="ch1" name="choice" id="li0"/>
<label for="li0"></label>
</li>
<li class="li1">
<input type="radio" value="ch2" name="choice" id="li1"/>
<label for="li1"></label>
</li>
<li class="li2">
<input type="radio" value="ch3" name="choice" id="li2"/>
<label for="li2"></label>
</li>
<li class="li3">
<input type="radio" value="ch4" name="choice" id="li3"/>
<label for="li3"></label>
</li>
</ul>
my code is:
function go_back(){
$("#back").bind("click",function(){
qNum--;
showQuestion(qNum);
if(AnsW.length === 0){
calcAnswers--;
}
alert(AnsW[qNum]);
tempAns = AnsW[qNum];//user last answer which is false i need this to make the radio button point to that answer
//alert( $("input[value='tempAns']"));
$("input").val(tempAns).attr('checked', true);
alert(tempAns);
//alert(tempAns);
AnsW.splice(-1,1);//delete the false answer from the array i need this to make sure that the answer is deleted and there wont be overload of wrong answers
//alert(deleteAns);
if(qNum === 0){
$("#back").css({"visibility":"hidden"})
}
});
}
jQuery selectors allow you to find elements based on their attributes, an exact match example:
$("element.class[attribute=value]")
Check the value attribute in the selector
$("input[value="+tempAns+"]").prop('checked', true)
I was trying to code jquery/JS logic for hide/show description based on radio button being checked or not. If the radio button is checked on page load, i want the description associated with that radio button to load. But the default one of the either has to selected/checked
I did try to code with .change and click methods inside ready(). But was not successful
I have only two radio buttons, I'm not a Javascript/jquery person. Any input is appreciated. This is an example
<div id="ServiceSelection">
<input type="radio" name="Service" checked="Checked" value="B"> Option 1
<br>
<input type="radio" name="Service" value="P"> Option 2
<br>
<div id="DivB" style="display:none" class="desc">B Description goes here </div>
<div id="DivP" style="display:none" class="desc">P Description goes here </div>
</div>
Edited DIV:
<div id="ServiceSelection">
<input type="radio" name="Service" checked="Checked" value="B"> Option 1
<br>
<div id="DivB" style="display:none" class="desc">B Description goes here </div>
<input type="radio" name="Service" value="P"> Option 2
<br>
<div id="DivP" style="display:none" class="desc">P Description goes here </div>
</div>
Thanks in advance
J
if($('input[name=Service]').is(':checked')){ //is it checked?
var v = $('input[name=Service]:checked').val(); //get the value
$('div[id$='+v+']').show(); //target the end of selector, and match it to our value
}
$('input[name=Service]').on('click', function(){
$(this).parent().find('div').hide(); //hide the divs...
$('div[id$='+$(this).val()+']').show(); //show the div based on our value again..
});
fiddle
Try this:
function ShowData(evt) {
var val = $("input[name=Service]:checked").val();
if (val == 'B') {
$('#DivB').show();
$('#DivP').hide();
} else {
$('#DivP').show();
$('#DivB').hide();
}
}
$('input[name=Service]:radio').change(ShowData);
ShowData();
DEMO HERE
I'd suggest:
// hide the div elements with JavaScript, so they're visible to those
// users with JavaScript disabled:
$('#ServiceSelection div[id]').hide();
// select the radio input elements and bind to the change event
$('input:radio').change(function(){
// find the element whose id is equal to 'Div' + the value of the radio,
// show that div, hide the sibling div elements
$('#Div' + this.value).show().siblings('div').hide();
// filter the radio elements to find the one that's checked, and trigger the change event
}).filter(function(){return this.checked; }).change();
JS Fiddle demo.
References:
change().
filter().
hide
().
show().
siblings().
I have two grid views containing 12 and 24 rows resp. Each row contains radiobutton list(Yes/No). Below both the grids, there is one more radio button list. In first grid, all radio buttons are by default "Yes". If any one selects know, the radio button below the grids should become disabled with selection ="No". In second grid the radio buttons are by default "No". If any one selects Yes, the radio button below the grid should become disabled with selected value="No". All these work should be done through javascript...
How can I do so...???
First user clicked a button at first grid. Then you capture it and changed the second grid to false. Use EventListener. I used checkbox for this job. Because you cant set more than 1 radio button checked at same time in same form.
<h3>First Grid</h3>
<input id="radio1_1" type="checkbox" name="correctAnswer" value="1">Yes
<input id="radio1_2" type="checkbox" name="correctAnswer" value="2">No
<br>
<h3>Second Grid</h3>
<input id="radio2_1" type="checkbox" name="correctAnswer" value="1">Yes
<input id="radio2_2" type="checkbox" name="correctAnswer" value="2">No
<br>
<h3 id="h3">Third Grid</h3>
<input id="radio3_1" type="checkbox" name="correctAnswer" value="1">Yes
<input id="radio3_2" type="checkbox" name="correctAnswer" value="2">No
And a jQuery function
$(document).ready(function(){
$('#radio1_2').prop('checked', true);
$('#radio2_2').prop('checked', true);
$('#radio3_2').prop('checked', true);
$('#radio1_1').click(function(){
$('#radio2_2').prop('checked', false);
$('#radio2_2').prop('disabled', true);
})
$('#radio2_1').click(function(){
$('#radio3_2').prop('checked', false);
$('#radio3_2').prop('disabled', true);
})
});
You can find this example at this link