У меня есть много переключателей, которые извлекают значение из моей базы данных, и если оно установлено на «1», я делаю переключатель переключателем.
Если переключатель установлен, и пользователь снова нажимает на него, я все равно хочу очистить эту кнопку. У кого-нибудь есть идея?
$radio1 захватывает данные из базы данных и будет либо 0, 1, либо 2
<input value="1" name="radio1" type="radio"<?php if($radio1==1){echo " checked";} ?>> <input value="2" name="radio2" type="radio"<?php if($radio1==2){echo " checked";} ?>>
Ответ Varun Malhotra слегка изменен: я изменил 2 строки кода, которые немного улучшились для меня. Но в целом, ответ Варуна был СОВЕРШЕННО!
$('input[type="radio"]').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.prop('checked', true); $radio.data('waschecked', true); } // remove was checked from other radios $radio.siblings('input[type="radio"]').data('waschecked', false); });
Я предлагаю добавить пользовательский атрибут, чтобы отслеживать предыдущее состояние каждого радио:
$(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" />
JSFIDDLE DEMO
ОБНОВИТЬ:
$(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[type="radio"]').data('waschecked', false); }); });
Но убедитесь, что у вас нет других радио-групп для работы, иначе вам нужно предоставить некоторые атрибуты, чтобы указать эти кнопки, такие как имя prop, которое я сфокусировал ранее.
При первом щелчке по событию изменяется событие перед щелчком. Вы можете использовать их. Работа со многими радиогруппами и даже если вы проверили радиокнопки.
$("input[type=radio]").each(function() { var secondClick = true; $(this).change(function() { secondClick = false; }); $(this).click(function() { if (secondClick) { $(this).prop("checked", false); } secondClick = true; }); });
JSFIDDLE DEMO
$("input[type=radio]").on('click', function () { if ($(this).is(':checked')) { $(this).prop("checked", false); } else { $(this).prop("checked", true); } });
Это должно работать в более общем плане, чем другие решения, поскольку он обрабатывает случаи, когда все радиостанции не находятся в одном и том же родителе.
var $radios = $('input[type="radio"]'); $radios.click(function () { var $this = $(this); if ($this.data('checked')) { this.checked = false; } var $otherRadios = $radios.not($this).filter('[name="' + $this.attr('name') + '"]'); $otherRadios.prop('checked', false).data('checked', false); $this.data('checked', this.checked); });