Как переключить radiobutton

скажем, это мой HTML:

<input type="radio" name="rad" id="Radio0" checked="checked" />
<input type="radio" name="rad" id="Radio1" />
<input type="radio" name="rad" id="Radio2" />
<input type="radio" name="rad" id="Radio4" />
<input type="radio" name="rad" id="Radio3" />

Как вы можете видеть, 1-й переключатель установлен. Мне нужен переключатель для функции переключения. Для EG. Если я снова нажму на radio0, все переключатели должны быть снят.

Как я могу этого достичь?

обновление: Я не хочу никаких лишних кнопок. Для EG. Я мог бы добавить кнопку и установить свойство checked для всех переключателей как false. Однако я этого не хочу. Я только хочу, чтобы моя форма состоят из этих 4 переключателей.

обновление: поскольку большинство людей не понимают, чего я хочу, позвольте мне попытаться перефразировать-Я хочу, чтобы переключатель работал в режиме переключения. Я дал одно и то же имя всем переключателям, поэтому это группа. Теперь я хочу, чтобы радиобутоны переключились сами. Например. если я нажму на radio0, он должен быть снят, если он установлен и проверен, если он не установлен.

10
html html5 javascript jquery

5 ответов

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

$(function(){
    $('input[name="rad"]').click(function(){
        var $radio = $(this);

        // if this was previously checked
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
        }
        else
            $radio.data('waschecked', true);

        // remove was checked from other radios
        $radio.siblings('input[name="rad"]').data('waschecked', false);
    });
});

вам также нужно будет добавить этот атрибут в первоначально проверенную разметку радио

<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" />

см. демо здесь:http://jsfiddle.net/GoranMottram/VGPhD/2/

20

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

9

Я использую onClick (), как показано ниже для моих пользовательских радиостанций:

$(function(){
  // if selected already, deselect
  if ($(this).hasClass('selected') {
    $(this).prop('checked', false);
    $(this).removeClass('selected');
  }
  // else select
  else {
    $(this).prop('checked', true);
    $(this).addClass('selected');
  }
  // deselect sibling inputs
  $(this).siblings('input').prop('checked', false);
  $(this).siblings('input').removeClass('selected');
}
0

используя @Goran Mottram answer просто немного настроить его, чтобы удовлетворить случай, когда переключатели не являются братьями и сестрами.

$(".accordian-radio-button").click(function(){
    var wasChecked = true;
    if($(this).data('waschecked') == true){
        $(this).prop('checked', false);
        wasChecked = false;
    }
    $('input[name="ac"]').data('waschecked', false);
    $(this).data('waschecked', wasChecked);
})

<input class="accordian-radio-button" data-waschecked="false" type="radio" name="ac" id="a1" />
0

этот код решил мою проблему

$("[type='radio']").on('click', function (e) {
    var previousValue = $(this).attr('previousValue');
    if (previousValue == 'true') {
        this.checked = false;
        $(this).attr('previousValue', this.checked);
    }
    else {
        this.checked = true;
        $(this).attr('previousValue', this.checked);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label >Toogle radio button example</label>
<br />
<input type="radio" name="toogle_me" value="mango"> Blue </input>
<input type="radio" name="toogle_me" value="kiwi"> Green </input>
<input type="radio" name="toogle_me" value="banana"> Yellow </input>
<input type="radio" name="toogle_me" value="orange"> Orange </input>
0