Изменение значения прослушивателя или переключателя jQuery v3.5.1

#javascript #jquery #radio-button

#javascript #jquery #переключатель

Вопрос:

Я просмотрел здесь несколько других вопросов и ответов, которые относятся к более старым версиям 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 () {

Пока ничего…

Если кто-нибудь знает, какой самый последний синтаксис (я пробовал их в более старых версиях, и они работают), это было бы здорово.

Спасибо!

Ответ №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>

Развернуть фрагмент