I have following code:
<div class="select"><input onclick="return next();" type="radio"></div>
<div class="select" style="display: none" ><input onclick="return next();" type="radio"></div>
<div class="select" style="display: none" ><input onclick="return next();" type="radio"></div>
<script>
function next() {
$('.select').next().show();
}
</script>
Considering I click the first element's radio button. How can I select the next parent element in line. Right now they all show.
Thanks,
You are using jQuery in the wrong way.
All of the elements has the select class, you have to make it known to the jQuery code that which .select next to which .select you want to show, right now clicking on any .select element triggers the function that shows the next sibling of all of the .select elements.
Instead of using onclick attribute to facilitate the click handler
<script>
function next() {
$('.select').next().show();
}
</script>
Use jQuery's event attaching
<script>
$(document).ready(function(){
$('.select').on("click", function(){
$(this).next().show();
});
});
</script>
And remove onclick attribute from the elements
<div class="select"><input type="radio"></div>
<div class="select" style="display: none" ><input type="radio"></div>
<div class="select" style="display: none" ><input type="radio"></div>
Also note that currently you are looking for clicks on the .select element that contains the radio input, it opens up possibility that the user may not even check the radio input and still the next .select element be shown. That is because the div spans more than the area of the input element. My suggestion is that either limit the width of the .select div element to the width of the inner content i.e the input or attach onchange event to the radio input itself.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments