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

Question

我在这里看过其他几个Q/A的版本，这些Q/A可以追溯到几年前JQuery的旧版本。

我已经设置了如下所示的：

<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 () {

到目前为止.

如果有人知道最近的语法是什么(我已经在旧版本中尝试过了，并且它们可以工作)，那就太好了。

谢谢!

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

​