As you can see my radio button ids are dynamic.
I want to disable input type file button if my value value="0" or value="2" radio buttons without affecting other section.
/*First Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="10_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="10_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="10_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
/*Second Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="11_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="11_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="11_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
/*Third Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="16_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="16_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="16_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
....
/*nth Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="nth_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="nth_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="nth_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
I'm loading my form dynamically so my radio button ids are dynamic well. Each section contain input type file button. My input type file id will have the same id that is "Button_select_1" for some reason.
Assuming that there can be more than 1 checkbox/radio button checked at a time throughout the entire collection of elements you need some means by which to distinguish them as a group, otherwise as they are all called the same thing you will only be able to check one at a time. To that end you can remove ID attributes generally as they often cause issues and use a name[x] type syntax for the radio button names. If there are a unlimited possible number of these, dynamically generated, it becomes easy to assign a number ( or unique string ) within the square braces in whatever code generates the sections.
As mentioned by #mplungian, nesting the elements within a common parent ( a section is perfect ) it becomes very easy to process the checking of radio buttons and the required enable/disable of the file input. A delegated event listener, bound to the page in this case, will work regardless of the number of dynamic elements added to the DOM and some very simple code within the event handler will find the file input and disable it if any radio other than the Yes radio is checked. As that is to be the default behaviour and the No is selected by default it makes sense to disable the file input initially.
The name[x] type syntax can also help when processing a large dataset serverside as that x value acts as a key within the array!
document.addEventListener('change',e=>{
if( e.target instanceof HTMLInputElement && e.target.type=='radio' ){
let bttn=e.target.closest('section').querySelector('[type="file"]');
bttn.disabled=( parseInt( e.target.value )!==1 );
}
})
body{
counter-reset:sections;
}
section:before{
counter-increment:sections;
content:'Section: 'counter(sections)
}
<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[1]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[1]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[1]" type="radio" value="2" /> N/A</label>
</div>
</div>
</section>
<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[2]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[2]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[2]" type="radio" value="2" />N/A</label>
</div>
</div>
</section>
<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[3]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[3]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[3]" type="radio" value="2" />N/A</label>
</div>
</div>
</section>
<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[n]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[n]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[n]" type="radio" value="2" />N/A</label>
</div>
</div>
</section>
Here is my suggestion
Find the closest static container of all the sections and delegate from there - I made a div with id="container"
wrap each section in a div with class section to be able to navigate to the input from the related radio
Initialise if needed - if the radios may already have been selected from the server
With this code the IDs of the radios and file elements are not needed.
I also removed the nested label which is not valid HTML but this change is not relevant to the question
document.getElementById("container").addEventListener("click", (e) => {
const tgt = e.target;
if (!tgt.matches("[name=AnswerResponse]")) return; // not a radio
tgt.closest(".section").querySelector("[type=file]").disabled = ["0", "2"].includes(tgt.value)
});
// init:
document.querySelectorAll(".section").forEach(section => {
const selectedRad = section.querySelector("input[name=AnswerResponse]:checked");
if (selectedRad) {
section.querySelector("[type=file]").disabled = ["0", "2"].includes(selectedRad.value);
}
})
.section {
border: 1px solid black;
}
<div id="container">
<div class="section">
/*First Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label> <input data-val="true" data-val-required="Kindly submit your response" id="10_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="10_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="10_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>
<div class="section">
/*Second Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="11_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="11_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="11_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>
<div class="section">
/*Third Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="16_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="16_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="16_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>
<div class="section">
.... /*nth Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="nth_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="nth_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="nth_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>
Related
I am very new to jquery and i need help with the following problem.
I have a form with three radio buttons with different values, i also have a forth radio button that has no value, i want it to have the value of the the number text box below it. How can i assign the value of the text box to the value of the radio button as i increase or decrease it.
function increaseValue() {
var value=parseInt(document.getElementById('number').value, 10);
value=isNaN(value) ? 0: value;
value++;
document.getElementById('number').value=value;
}
function decreaseValue() {
var value=parseInt(document.getElementById('number').value, 10);
value=isNaN(value) ? 0: value;
value < 1 ? value=1: '';
value--;
document.getElementById('number').value=value;
}
<div class="custom-control custom-radio mb-3">
<input name=“coins” value="1" class="custom-control-input fixed-coin" id="1coin" type="radio">
<label class="custom-control-label" for="1coin">1 Coin</label>
</div>
<div class="custom-control custom-radio mb-3">
<input name="coins" value="10" class="custom-control-input fixed-coin" id="10coin" type="radio">
<label class="custom-control-label" for="10coin">10 Coins</label>
</div>
<div class="custom-control custom-radio mb-3">
<input name="coins" value="100" class="custom-control-input fixed-coin" id="100coin" type="radio">
<label class="custom-control-label" for="100coin">100 Coins</label>
</div>
<div class="custom-control custom-radio mb-3">
<input name="coins" value="0" class="custom-control-input custom-coin" id="custom" type="radio">
<label class="custom-control-label" for="custom">Custom Coin</label>
</div>
<div class="custom-coin" style="display: none;">
<div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" class="custom-count" id="number" value="0" />
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
</div>
<div class="book-button text-center">
<button class="btn btn-primary" type="submit"> Coin </button>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[class$='custom-coin']").click(function() {
var trig = $(this).val();
$("div.custom-coin").show();
});
$("input[class$='fixed-coin']").click(function() {
var trig = $(this).val();
$("div.custom-coin").hide();
});
});
</script>
You can do it like this:
$('.custom-count').change(function() {
$('input.custom-coin:radio').val($(this).val())
})
so when ever your input changes then it will add the value of the input to the radio button.
$('.custom-control-input').change(function() {
$("div.custom-coin").toggle($(this).hasClass("custom-coin"))
})
$('.custom-count').change(function() {
$('input.custom-coin:radio').val($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-radio mb-3">
<input name=“coins” value="1" class="custom-control-input fixed-coin" id="1coin" type="radio">
<label class="custom-control-label" for="1coin">1 Coin</label>
</div>
<div class="custom-control custom-radio mb-3">
<input name="coins" value="10" class="custom-control-input fixed-coin" id="10coin" type="radio">
<label class="custom-control-label" for="10coin">10 Coins</label>
</div>
<div class="custom-control custom-radio mb-3">
<input name="coins" value="100" class="custom-control-input fixed-coin" id="100coin" type="radio">
<label class="custom-control-label" for="100coin">100 Coins</label>
</div>
<div class="custom-control custom-radio mb-3">
<input name="coins" value="0" class="custom-control-input custom-coin" id="custom" type="radio">
<label class="custom-control-label" for="custom">Custom Coin</label>
</div>
<div class="custom-coin" style="display: none;">
<div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" class="custom-count" id="number" value="0" />
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
</div>
<div class="book-button text-center">
<button class="btn btn-primary" type="submit"> Coin </button>
</div>
You can assign input field value to the radio button like this way.
$('#number').on("change", function() {
$('.custom-coin').val($('#number').val())
})
I'm trying to find a minimal way to automatically cycle through input radios after a given delay and then loop back to the beginning using js.
In the HTML example below, 'slide1' is checked initially, then I'd like 'slide2' to be checked after 3 seconds, then 'slide3' etc. looping back to 'slide1' at the end.
Can anyone help me with this? Many thanks!
<div id="slider">
<div id="slider-content">
<input checked type="radio" name="slider" id="slide1" autofocus />
<input type="radio" name="slider" id="slide2" />
<input type="radio" name="slider" id="slide3" />
<input type="radio" name="slider" id="slide4" />
<input type="radio" name="slider" id="slide5" />
<input type="radio" name="slider" id="slide6" />
<input type="radio" name="slider" id="slide7" />
<input type="radio" name="slider" id="slide8" />
<input type="radio" name="slider" id="slide9" />
<input type="radio" name="slider" id="slide10" />
<input type="radio" name="slider" id="slide11" />
<input type="radio" name="slider" id="slide12" />
<input type="radio" name="slider" id="slide13" />
<input type="radio" name="slider" id="slide14" />
<input type="radio" name="slider" id="slide15" />
<div id="slides">
<div class="img1"> </div>
<div class="img2"> </div>
<div class="img3"> </div>
<div class="img4"> </div>
<div class="img5"> </div>
<div class="img6"> </div>
<div class="img7"> </div>
<div class="img8"> </div>
<div class="img9"> </div>
<div class="img10"> </div>
<div class="img11"> </div>
<div class="img13"> </div>
<div class="img14"> </div>
<div class="img15"> </div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
<label for="slide6"></label>
<label for="slide7"></label>
<label for="slide8"></label>
<label for="slide9"></label>
<label for="slide10"></label>
<label for="slide11"></label>
<label for="slide12"></label>
<label for="slide13"></label>
<label for="slide14"></label>
<label for="slide15"></label>
</div>
<div id="slide-indicator">
<div>
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
<label for="slide6"></label>
<label for="slide7"></label>
<label for="slide8"></label>
<label for="slide9"></label>
<label for="slide10"></label>
<label for="slide11"></label>
<label for="slide12"></label>
<label for="slide13"></label>
<label for="slide14"></label>
<label for="slide15"></label>
</div>
</div>
</div>
</div>
It's not tested, but the following should work. You'll need to make sure this function stops recurring when the user interacts with the inputs.
function checkInputsLoop(start, end, current){
setTimeout(() => {
document.getElementById(`slide${current}`).checked = true;
if (current === end){
current = start;
}
// add logic to stop once user has touched the inputs
checkInputsLoop(start, end, current);
}, 3000)
};
checkInputsLoop(1, 15, 1);
I have 2 groups of checkbox options on same page. below is the code.
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="1" th:text="borrower1" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="2" th:text="borrower2" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="3" th:text="borrower3" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="4" th:text="borrower4" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity1}" th:value="1" th:text="Ethnicity1" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity2}" th:value="2" th:text="Ethnicity2" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity3}" th:value="3" th:text="Ethnicity3" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity4}" th:value="4" th:text="Ethnicity4" />
</label>
</div>
Now,
User can select first 3 check boxes but clicking the 4th (last) one should
select the 4th (last) one and deselect all other of the set. Same should
happen for all checkbox sets.
Example : User can select A,B,C checkbox at a same time but when he checks D
all the above selected checkboxes should get unselected. Similarly for E,F,G
and H. I hope I am clear now.
Please help me on this. I hope I am clear, if not please do let me know
The below code section should work according to your requirement
$(document).ready(function() {
$('.checkbox1').on('click', function() {
var last_chekbox1 = $('.checkbox1:last');
if (last_chekbox1.is(':checked')) {
$('.checkbox1').prop('checked', false);
$(this).prop('checked', true);
}
});
$('.checkbox2').on('click', function(e) {
var last_chekbox2 = $('.checkbox2:last');
if (last_chekbox2.is(':checked')) {
$('.checkbox2').prop('checked', false);
$(this).prop('checked', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="1" th:text="borrower1" class="checkbox1" /> A
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="2" th:text="borrower2" class="checkbox1" /> B
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="3" th:text="borrower3" class="checkbox1" /> C
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="4" th:text="borrower4" class="checkbox1" /> D
</label>
</div>
<hr>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity1}" th:value="1" th:text="Ethnicity1" class="checkbox2" /> E
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity2}" th:value="2" th:text="Ethnicity2" class="checkbox2" /> F
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity3}" th:value="3" th:text="Ethnicity3" class="checkbox2" /> G
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity4}" th:value="4" th:text="Ethnicity4" class="checkbox2" /> H
</label>
</div>
$('checkbox1').on('click'function(){
$('checkbox').attr('checked',false)
$(this).attr('checked',true)
})
try something like this
In a form I have a set of radio buttons with fixed donation amount and another field when a user can enter an amount of choice. For simplicity whilst processing the form I want a functionality where whatever is selected populates in the other field. I have the HTML/JS below:
$("input[id^='radio']").click(function() {
$("input[name='otheramount']").val(jQuery(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-1" value="10.00">
<label for="amount-1">$10</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-2" value="15.00">
<label for="amount-2">$15</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-3" value="20.00">
<label for="amount-3">$20</label>
</div>
<div class="radio-select">
<input type="radio" name="selamount" id="amount-3" value="20.00">
<label for="amount-4">$25</label>
</div>
<div class="form-group other-amount col-lg-3 col-md-8 col-xs-12 padd-top-10"></div>
<input type="text" id="otheramount" name="otheramount" value="" placeholder="Or Other Amount">
I have also tried
<input type="radio" name="selamount" id="amount-3" value="20.00" onclick="document.getElementById('otheramount').value = this.value">
But when the first one changes it does not change anymore on subsequent clicks.
None of your IDs begin with "radio," which is what your [id^='radio'] selector is trying to match.
They begin with "amount" instead, so you should use:
$("input[id^='amount']").click(...
Also, here's a trick you can use with labels.
Instead of doing:
<input type="radio" name="selamount" id="amount-1" value="10.00">
<label for="amount-1">$10</label>
… you can put the input inside the label and avoid using the for attribute altogether:
<label>
<input type="radio" name="selamount" id="amount-1" value="10.00">
$10
</label>
Working Snippet
$("input[id^='amount']").click(function() { //CHANGE THIS
$("input[name='otheramount']").val(jQuery(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-1" value="10.00">
$10
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-2" value="15.00">
$15
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-3" value="20.00">
$20
</label>
</div>
<div class="radio-select">
<label>
<input type="radio" name="selamount" id="amount-3" value="20.00">
$25
</label>
</div>
<div class="form-group other-amount col-lg-3 col-md-8 col-xs-12 padd-top-10">
<input type="text" id="otheramount" name="otheramount" value="" placeholder="Or Other Amount">
When I click one of the alphabet, the selected one shall be displayed and the rest should be hidden.
Somehow, the code doesn't work. I'm using jQuery.
$("#r-learn-more").click(function() {
alert("Handler for .click() called.");
});
$("#r-book-viewing").click(function() {
$("#bb").attr("display", "block");
});
$("#r-closing-price").click(function() {
alert("Handler for .click() called.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" style="display: block;">a</div>
<div id="bb" style="display: none;">b</div>
<div style="display: none;">c</div>
In general you tried with $("#bb").attr('display','block'), must be $("#bb").css("display","block");
Maybe the better way is to use something like:
<div class="fieldset-content">
<div class="radio">
<input type="radio" data-show="aa" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" data-show="bb" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" data-show="cc" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class='item' style="display: block;">a</div>
<div id="bb" class='item' style="display: none;">b</div>
<div id="cc" class='item' style="display: none;">c</div>
And JS
var $items = $('.item');
$(':radio').on('change', function () {
var $item = $('#' + this.dataset.show);
$items.not($item).css('display', 'none');
$item.css('display', 'block');
});
Try this
$('.radio input').change(function(event){
$('.alphabet-letter').hide();
$('#'+$(this).data('id')).show();
}).first().prop('checked', true).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" data-id="aa">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing" data-id="bb">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price" data-id="cc">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class="alphabet-letter">
a
</div>
<div id="bb" class="alphabet-letter">
b
</div>
<div id="cc" class="alphabet-letter">
c
</div>
Wouldn't even be easier just to have one "result" div?
Something like this
EDIT: For displaying the "a" as default either you just put "a" in the result div, or maybe on load you get the text (in this case you are not using the value) of the radio button option selected as per the edit in the snippet
$('#result').text($('input:radio[name=radiogroup1]:checked').parent().text());
$( ".radio input" ).click(function() {
var label = $("label[for='"+$(this).attr('id')+"']");
console.log(label);
console.log(label.html());
$('#result').text(label.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="result" style="display: block;">
<!--Alernative to load the text by jquery you could just put here "a"-->
</div>