Как использовать радио на событии изменения?

У меня есть две кнопки-переключателя при изменении события. Я хочу изменить кнопку. Как это возможно? Мой код

<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer

скрипт

<script>
    $(document).ready(function () {
        $('input:radio[name=bedStatus]:checked').change(function () {
            if ($("input[name='bedStatus']:checked").val() == 'allot') {
                alert("Allot Thai Gayo Bhai");
            }
            if ($("input[name='bedStatus']:checked").val() == 'transfer') {
                alert("Transfer Thai Gayo");
            }
        });
    });
</script>
 Himanth Kumar31 окт. 2012 г., 08:17
оба, если условия сравниваются с 'allot', измените его на передачу .. он работает нормально ..
 Parth Jasani30 окт. 2018 г., 05:58
Шу к бхудев Майя Ма И Хороший вопрос :)
 mplungjan31 окт. 2012 г., 08:22
я верюif($("input[name='bedStatus']:checked").val() == 'allot') можно написатьif($("input[name='bedStatus']").val() == 'allot')

Ответы на вопрос(4)

Решение Вопроса

Вы можете использоватьthis что относится к текущемуinput элемент.

$('input[type=radio][name=bedStatus]').change(function() {
    if (this.value == 'allot') {
        alert("Allot Thai Gayo Bhai");
    }
    else if (this.value == 'transfer') {
        alert("Transfer Thai Gayo");
    }
});

http://jsfiddle.net/4gZAT/

Обратите внимание, что вы сравниваете значение сallot в обоих, если заявления и:radio селектор устарел.

Если вы не используете jQuery, вы можете использоватьdocument.querySelectorAll а такжеHTMLElement.addEventListener методы:

var radios = document.querySelectorAll('input[type=radio][name="bedStatus"]');

function changeHandler(event) {
   if ( this.value === 'allot' ) {
     console.log('value', 'allot');
   } else if ( this.value === 'transfer' ) {
      console.log('value', 'transfer');
   }  
}

Array.prototype.forEach.call(radios, function(radio) {
   radio.addEventListener('change', changeHandler);
});
 Salman Khakwani08 мая 2017 г., 11:27
Задача решить 'Thayi gayo bhai' ^ _ ^
 Bobort07 дек. 2018 г., 04:40
Вместоthis, Я используюevent.target.
 undefined05 авг. 2018 г., 18:48
@Piterden Прежде всего, этому ответу 6 лет! Функции стрелок были введены в ES6 для ситуаций, когда вы либо не заботитесь оthis значение или вы хотите использовать окружающий контекстthis значение в вашем обработчике, этот фрагмент используетthis, И утверждать, что использование обычных функций - это «старая дурная практика», совершенно бессмысленно! Кроме того, старые браузеры не поддерживают синтаксис функции стрелки иArray#includes и для поддержки старых браузеров следует использовать транспортер и шимм. Зачем делать простой ответ, который не имеет ничего общего со сложными функциями стрелок?
 Miquel Al. Vicens14 дек. 2017 г., 16:02
:radio селектор не считается устаревшим (в jQuery).
 Ashish Mehta03 янв. 2017 г., 08:11
Если я сбрасываю входное радио и запускаю событие смены радио, каков фактический выход?

why.

<input ... class="rButton">
<input ... class="rButton">

скрипт

​$( ".rButton" ).change(function() {
    switch($(this).val()) {
        case 'allot' :
            alert("Allot Thai Gayo Bhai");
            break;
        case 'transfer' :
            alert("Transfer Thai Gayo");
            break;
    }            
});​
$(document).ready(function () {
    $('#allot').click(function () {
        if ($(this).is(':checked')) {
            alert("Allot Thai Gayo Bhai");
        }
    });

    $('#transfer').click(function () {
        if ($(this).is(':checked')) {
            alert("Transfer Thai Gayo");
        }
    });
});

JS Fiddle

 Gh6113 июл. 2016 г., 11:13
Вместо$(this).is(":checked") использованиеthis.checked, Это чистый JS, и поэтому он намного быстрее.

Адаптация вышеуказанного ответа ...

$('input[type=radio][name=bedStatus]').on('change', function() {
     switch($(this).val()) {
         case 'allot':
             alert("Allot Thai Gayo Bhai");
             break;
         case 'transfer':
             alert("Transfer Thai Gayo");
             break;
     }
});

http://jsfiddle.net/xwYx9/

 Ohgodwhy11 мар. 2014 г., 22:43
@okenshield.on() действительно имеет преимущества по сравнению с вышесказанным, однако, учитывая динамические селекторы, это, безусловно, единственный путь в jQuery 1.7+
 KyleK17 мар. 2015 г., 21:52
Обратите внимание, что переключатель позволяет вам не повторять $ (this) .val (), вам следует предпочесть эту версию.
 okenshield11 мар. 2014 г., 15:12
Какая разница между использованием «вкл» и ответом выше?
 Hugo Silva30 июл. 2014 г., 07:05
@О, Боже, почему -on имеет преимущества, когда вы предоставляете контекст для делегирования события или даже для динамических селекторов, как вы сказали, но способ, которым вы его написали, в точности совпадает с ответом выше.

Ваш ответ на вопрос