javascript jquery радио-кнопка нажмите

90

У меня есть 2 переключателя и запущен jquery.

<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second

Теперь с помощью кнопки я могу настроить onClick для запуска функции. Как заставить переключатели запускать функцию, когда я нажимаю на одну из них?

Дэвид19801
источник
4
Заметка. Лучше всего, чтобы элементы формы не реагировали на щелчок, так как многие люди перемещаются по формам с помощью клавиатуры.
superluminary

Ответы:

169

Вы можете использовать .changeто, что хотите

$("input[@name='lom']").change(function(){
    // Do something interesting here
});

с jQuery 1.3

"@" больше не нужен. Правильный способ выбора:

$("input[name='lom']")
Питер Келли
источник
7
Обратите внимание, что, начиная с jQuery 1.3, вам больше не нужен '@'. Правильный способ выбора:$("input[name='lom']")
lubar
4
Можно ли интегрировать это решение с решением @JohnIdol ниже с условными операторами, основанными на значениях радио? ex$("input[name='lom']").change(function(){ if ($(this).val() === '1') {..... // rest conditional statements based on values here } ;
LazerSharks
Начиная с jQuery 1.3, вы не должны использовать "@" в свойстве name. Если вы это сделаете, вы получите сообщение jquery.self-0a6570c….js?body=1:1464 Uncaught Error: Syntax error, unrecognized expressionоб ошибке. Так что это не вопрос выбора.
scaryguy
53

Если у вас есть радиостанции в контейнере с id = radioButtonContainerId, вы все равно можете использовать onClick, а затем проверить, какой из них выбран, и соответственно запустить некоторые функции:

$('#radioButtonContainerId input:radio').click(function() {
    if ($(this).val() === '1') {
      myFunction();
    } else if ($(this).val() === '2') {
      myOtherFunction();
    } 
  });
JohnIdol
источник
Спасибо. Это сработало для меня, потому что мое поле было частью массива, и я не мог использовать нотацию input [name = 'xxx'] - <input type = "radio" name = "Need [measure_type]" id = "Need_measure_type" value = "aaa">
crafter
Это отреагирует, даже если вы переместите маркер вниз и с помощью клавиш со стрелками?
Alisso 02
это не будет работать на мобильном телефоне # селектор не работает на мобильном телефоне.
zawhtut
19
<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>

$("input[name='radio']:checked").val()
Бишой Ханна
источник
1
Хотя этот ответ не показывает, как подключить код к событию, мне нравится, что он содержит информацию о том, как получить значение группы переключателей.
Манфред
1
$ ("input [@ name = 'lom']"). change (function () {// Сделайте здесь что-нибудь интересное});
Bishoy Hanna
11

это должно быть хорошо

$(document).ready(function() {
    $('input:radio').change(function() {
       alert('ole');
    });
});
Адам Лукащик
источник
Вы пропустили а); сзади.
Бисвас Хайарголи
8

Есть несколько способов сделать это. В любом случае настоятельно рекомендуется иметь контейнер вокруг переключателей, но вы также можете поместить класс прямо на кнопки. С помощью этого HTML:

<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>

можно выбрать по классу:

$(".shapeButton").click(SetShape);

или выберите по ID контейнера:

$("#shapeList").click(SetShape);

В любом случае событие сработает при нажатии либо переключателя, либо метки для него, хотя, как ни странно, в последнем случае (выбор с помощью «#shapeList») нажатие на метку по какой-то причине вызовет функцию щелчка дважды, в минимум в FireFox; выбор по классу этого не сделает.

SetShape - это функция, которая выглядит так:

function SetShape() {
    var Shape = $('.shapeButton:checked').val();
//dostuff
}

Таким образом, вы можете иметь ярлыки на своих кнопках и иметь несколько списков переключателей на одной странице, которые выполняют разные действия. Вы даже можете сделать так, чтобы каждая отдельная кнопка в одном списке выполняла разные действия, настроив разное поведение в SetShape () в зависимости от значения кнопки.

ZeroK
источник
3

Всегда полезно ограничить поиск в DOM. так что лучше также использовать родительский объект, чтобы не обходить весь DOM.

ЭТО ОЧЕНЬ БЫСТРО

<div id="radioBtnDiv">
  <input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
 <input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>



 $("input[name='myButton']",$('#radioBtnDiv')).change(
    function(e)
    {
        // your stuffs go here
    });
Вин
источник