Как я могу переключаться с радиоблока

Ответ 1

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

$(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/

Ответ 2

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

Ответ 3

Я использую 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');
}

Ответ 4

Используя @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" />

Ответ 5

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

$("[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>

Ответ 6

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

Моей главной проблемой была последняя строка принятого ответа, требующая сброса:

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

И так как я не использую jQuery, мне пришлось бы самим пройтись по петле и оценить братьев и сестер, что не так уж сложно, но мне показалось неэлегичным. Но с этим методом не обойтись, потому что вы используете набор данных как хранилище информации.

Поэкспериментировав, я понял, что проблема в том, что при нажатии на радио запускается событие clicked, и любая функция, прикрепленная к этому событию click, завершает себя до того, как будет оценена функция для события "onchange", не говоря уже о том, чтобы называется. Таким образом, если событие щелчка "снимает флажок" с переключателя, событие изменения не запускается.

Я оставил свою неудачную попытку здесь:

Но если бы вы могли ответить на вопрос "произойдет ли событие изменения после этого события клика?" тогда вы можете заставить тумблер работать.

Решение, которое я нашел, можно увидеть на этой ручке:

Но в основном так:

function onClick(e) {
  e.dataset.toDo = 'uncheck';
  setTimeout(uncheck, 1, {
    event:'click',
    id:e.id,
    dataset:e.dataset
  });
}

Итак, для события click установите маркер, по которому произошел щелчок, и используйте setTimeout(), чтобы создать паузу, позволяющую оценить событие onchange и запустить его.

function onChange(e) {
  e.dataset.toDo = 'leave';
}

Если происходит событие onchange, оно отменяет то, что было сделано событием onclick.

function uncheck(radio) {
  log('|');
  if (radio.event !== 'click') return;
  log('uncheck');
  if (radio.dataset.toDo === 'uncheck') {
    document.getElementById(radio.id).checked = false;
    radio.checked = false;
  } 
}

Затем, когда запускается функция снятия отметки, она получает информацию о том, следует ли событие изменения за событием щелчка или нет. Если нет, то радио не проверяется, и функционирует как переключатель.

И это в основном самовозврат, поэтому мне не нужно перебирать все радиомодули и сбрасывать их наборы данных к начальным значениям в конце функции.

Теперь я уверен, что есть более удобный асинхронный/ожидающий способ сделать это, который не использует setTimeout и был бы еще более элегантным, но я все еще учусь, и я не мог придумать это. Кто-нибудь еще?