клацніть перемикач javascript jquery -


89

У мене працює 2 перемикачі та jquery.

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

Тепер за допомогою кнопки я можу встановити onClick для запуску функції. Який спосіб змусити перемикачі запускати функцію, коли я натискаю на одну з них?


4
Примітка. Краще, щоб елементи форми не реагували на клацання, оскільки багато людей орієнтуються у формах за допомогою клавіатури.
надсвітлий

Відповіді:


166

Ви можете використовувати .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 нижче із умовними операторами на основі радіозначень? екс$("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();
    } 
  });

Дякую. Це працювало для мене, оскільки моє поле було частиною масиву, і я не міг використовувати нотацію input [name = 'xxx'] - <input type = "radio" name = "Need [measure_type]" id = "Need_measure_type" value = "aaa">
крафтер

Чи реагує це, навіть якщо ви кладете вкладку вниз і рухаєте маркер клавішами зі стрілками?
Аліссо

це не буде працювати в мобільному # селектор не працює в мобільному.
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 () {// Зроби тут щось цікаве});
Бішей Ганна


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);

або виберіть за ідентифікатором контейнера:

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

У будь-якому випадку подія спрацьовує при натисканні на перемикач або ярлик для нього, хоча, як не дивно, в останньому випадку (Вибір за допомогою "#shapeList"), натискання на ярлик з певних причин двічі активує функцію клацання на мінімум у FireFox; вибір за класом цього не зробить.

SetShape - це функція, і вона виглядає так:

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

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


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
    });
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.