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>

我想將 change() 事件附加到單選按鈕。

當我像這樣嘗試時

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

它僅將 change() 事件附加到第一個單選按鈕。

如何更改jQuery selector以將 change() 事件附加到所有單選按鈕？

注意：當我在瀏覽器中控制台$('input[type=radio][name="chart-type"]')時，它只顯示第一個單選按鈕。

Answer 1

嘗試向所有單選按鈕添加一個 ID 或一個類，然后使用它來選擇按鈕。 例如：

<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>
    

在您的 Jquery 選擇中，您可以使用以下內容：

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

另外，請確保您所有的 jQuery 都在$(document).ready(funciton(){})

我自己嘗試過，它似乎有效。 這是我所擁有的： https : //codepen.io/habdeltawabae/pen/poyKQEP