监听器或单选按钮值更改 JQuery v3.5.1答案

【问题标题】：Listener or radio button value change JQuery v3.5.1监听器或单选按钮值更改 JQuery v3.5.1
【发布时间】：2020-12-04 23:38:08
【问题描述】：

我查看了这里的其他几个问答，这些问答可以追溯到几年前的旧版 JQuery。

我已经像这样设置了我的 HTML：

<ul class="choose-date-range">
    <li>
        <input type="radio" id="30-days" name="date-range" value="30-days">
        <label for="30-days">30 days</label>
    </li>
    <li>
        <input type="radio" id="60-days" name="date-range" value="60-days">
        <label for="60-days">60 days</label>
    </li>
    <li>
       <input type="radio" id="90-days" name="date-range" value="90-days">
       <label for="90-days">90 days</label>
    </li>
</ul>

和我的 JavaScript 像这样：

$('input:radio[name="date-range"]').on('click', function () {

    alert("test: " + $(this).val());

    switch ($(this).val()) {
        case '30-days':
            //ajax GET function
            break;

        case '60-days':
            //ajax GET function
            break;

        case '90-days':
            //ajax GET function
            break;
    }
});

我尝试了各种较旧的方法，例如：

jQuery("#30-days").attr('checked', true);

jQuery("input[value='30-days']").attr('checked', true);

$('input:radio[name="date-range"]').on('check', function () {

$('input:radio[name="date-range"]').checked(function () {

$('input:radio[name="date-range"]').clicked(function () {

到目前为止还没有...

如果有人知道最新的语法是什么（我在旧版本中尝试过这些语法并且它们有效），那就太好了。

谢谢！

【问题讨论】：

所以你的标题说改变，你没有尝试改变？ ;)

标签： javascript jquery radio-button

【解决方案1】：

您可以使用change 事件。

$('input:radio[name="date-range"]').on('change', function () {

    alert("test: " + $(this).val());

    switch ($(this).val()) {
        case '30-days':
            //ajax GET function
            break;

        case '60-days':
            //ajax GET function
            break;

        case '90-days':
            //ajax GET function
            break;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="choose-date-range">
    <li>
        <input type="radio" id="30-days" name="date-range" value="30-days">
        <label for="30-days">30 days</label>
    </li>
    <li>
        <input type="radio" id="60-days" name="date-range" value="60-days">
        <label for="60-days">60 days</label>
    </li>
    <li>
       <input type="radio" id="90-days" name="date-range" value="90-days">
       <label for="90-days">90 days</label>
    </li>
</ul>

【讨论】：

@NoahEldreth 没问题。