Jquery：将更改事件附加到孩子

Question

<form id="duration">
    <label for="change-chart-type-24H" >
        <input style="display:none;" name="chart-type" id="change-chart-type-24H" type="radio" value="24H">24H</label>
    <label for="change-chart-type-7D" >
        <input style="display:none;" name="chart-type" id="change-chart-type-7D" type="radio" value="7D" checked="true">7D</label>
    <label for="change-chart-type-30D" >
        <input style="display:none;" name="chart-type" id="change-chart-type-30D" type="radio" value="30D">30D</label>
</form>

I want to attach change() event to the radio buttons.

When I try like this

$('input[type=radio][name="chart-type"]').change( function() {
});

It attaches the change() event only to the first radio button.

How can change the jQuery selector to attach the change() event to all the radio buttons?

Note: When I console $('input[type=radio][name="chart-type"]') in the browser it shows only the first radio button.

Answer 1

Try adding an ID or a class to all the radio buttons and select the buttons using that. For instance:

<label for="change-chart-type-24H" >
        <input class="radio-button" style="display:none;" name="chart-type" id="change-chart-type-24H" type="radio" value="24H">24H
</label>
<label for="change-chart-type-7D" >
        <input class="radio-button" style="display:none;" name="chart-type" id="change-chart-type-7D" type="radio" value="7D" checked="true">7D
</label>
    

and in your Jquery selection, you can use something like this:

$(".radio-button").change( function() {
});

Also, make sure that all your jQuery is inside a $(document).ready(funciton(){})

I tried it on my own and it seems to work. Here is what I have: https://codepen.io/habdeltawabae/pen/poyKQEP