I have two radio buttons: 'Yes' and 'No'. If I choose 'Yes' an input textbox will appear, and if I choose 'No' the textbox will be hidden.
The problem is the radio buttons are added dynamically via a dropdown (numbers 1-30).
They are currently setup like this:
<li>
<input type="radio" id="yes-sdf-1" name="field[0][sdfradio]" value="Yes" />
<label for="yes-sdf-1">Yes</label>
<input type="text" name="field[0][sdf-text]" style="display: none;" />
</li>
<li>
<input type="radio" id="no-sdf-1" name="field[0][sdfradio]" value="No" checked />
<label for="no-sdf-1">No</label>
</li>
Here is my jQuery
$(':radio[name="sdfradio"]').change(function() {
var sdfradio = $(this).filter(':checked').val();
$('input#sdf-text').hide();
if( sdfradio == 'Yes'){
$('input#sdf-text').show();
$('input#sdf-text').addClass("field required");
}else if( sdfradio == 'No' ){
$('input#sdf-text').hide();
}
});
But as you can see, this can only work if there is one sdfradio. How do I let it work if I use an array like name="field[count_goes_here][sdfradio]"
Use jQuery on()
for event delegation in case dynamically generated elements.
Also, use *=
- jQuery attribute-contains selector .
$(document).on('change',':radio[name*="sdfradio"]',function() {
....
});
I see no reference to input
with ID sdf-text
- $('input#sdf-text')
.
You need $(':text[name*="sdfradio"]')
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.