Я хочу, чтобы убрать галочку с помощью кнопки, нажав на нее.
Итак, если переключатель отключен, я хочу проверить его, если он установлен, я хочу его снять.
Это не работает:
$('input[type=radio]:checked').click(function(){
$(this).attr('checked', false);
});
Теперь я не могу проверить переключатель.
Это не замена флажка, это позволяет радиогруппе вернуться в невыбранное состояние. Это было сложно, потому что выбор радио не действует как нормальное событие.
Браузер обрабатывает переключатели вне обычной цепочки событий. Таким образом, обработчик щелчка на радиокнопке с помощью event.preventDefault() или event.stopPropagation() НЕ предотвратит проверку радиокнопки. .RemoveAttr('флажок') должен быть выполнен в setTimeout, чтобы позволить событию завершиться, и браузер должен проверить радиокнопку (снова), а затем setTimeout сработает.
Это также правильно обрабатывает случай, когда пользователь запускает mousedown, но покидает радио кнопку перед мышью.
//$ = jQuery;
$(':radio').mousedown(function(e){
var $self = $(this);
if( $self.is(':checked') ){
var uncheck = function(){
setTimeout(function(){$self.removeAttr('checked');},0);
};
var unbind = function(){
$self.unbind('mouseup',up);
};
var up = function(){
uncheck();
unbind();
};
$self.bind('mouseup',up);
$self.one('mouseout', unbind);
}
});
надеюсь, это поможет
попробуйте следующее:
$('input[type=radio]').click(function(){
if (this.previous) {
this.checked = false;
}
this.previous = this.checked;
});
Принятый ответ не работает на мобильных устройствах. Он полагается на setTimeout и привязки, связанные с событиями мыши, которые просто не срабатывают на планшетах/мобильных устройствах.
Мое решение состоит в том, чтобы вручную отслеживать выбранное состояние с помощью обработчика событий "click" и пользовательского состояния класса.
Не нужно предотвращать поведение по умолчанию. Вот код в JQuery:
$("input:radio").on("click",function (e) {
var inp=$(this); //cache the selector
if (inp.is(".theone")) { //see if it has the selected class
inp.prop("checked",false).removeClass("theone");
return;
}
$("input:radio[name='"+inp.prop("name")+"'].theone").removeClass("theone");
inp.addClass("theone");
});
Это реальное решение...
var check;
$('input[type="radio"]').hover(function() {
check = $(this).is(':checked');
});
$('input[type="radio"]').click(function() {
check = !check;
$(this).attr("checked", check);
});
Попробуй, он работает для меня!
Если есть только один переключатель, вам нужно использовать флажок.
Нет смысла иметь один переключатель, с которым они работают с группой.
Вероятно, вы ищете элемент управления флажком.
Лучше UX иметь выбранную по умолчанию опцию "Выбрать нет" и не позволять пользователю снять отметку с любого переключателя.
(Элемент списка 9 в этой статье nngroup (neilsen):
http://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
Я знаю, что этот вопрос старый, но я просто столкнулся с этой проблемой и решил пойти сам и не хотел использовать кнопку-модификатор, например, ctrl.
Смотрите скрипту в http://jsfiddle.net/ArktekniK/yhbw469f/ Для переключения переключателя, щелкнув по самому переключателю
$('input[type=radio]').on('mousedown', function(e){
var wasChecked = $(this).prop('checked');
this.turnOff = wasChecked;
$(this).prop('checked', !wasChecked);
});
$('input[type=radio]').on('click', function(e){
$(this).prop('checked', !this.turnOff);
this['turning-off'] = !this.turnOff;
});
Для переключения радиокнопки, нажав на ярлык или сам переключатель.
$('label:has(input[type=radio])').on('mousedown', function(e){
var radio = $(this).find('input[type=radio]');
var wasChecked = radio.prop('checked');
radio[0].turnOff = wasChecked;
radio.prop('checked', !wasChecked);
});
$('label:has(input[type=radio])').on('click', function(e){
var radio = $(this).find('input[type=radio]');
radio.prop('checked', !radio[0].turnOff);
radio[0]['turning-off'] = !radio[0].turnOff;
});
Нашел это где-то, ища решение, делай, как простоту этого...
var checkedradio;
function docheck(thisradio) {
if (checkedradio == thisradio) {
thisradio.checked = false;
checkedradio = null;
}
else {checkedradio = thisradio;}
}
Использовать с:
<input type='radio' onclick='docheck(this);'>
Кажется, требуется двойной щелчок, чтобы отменить выбор, когда у вас есть несколько групп радио в форме, но это может быть решено с помощью функции для каждой группы, я полагаю...
Как упоминалось в HexInteractive, радиокнопка управляется вне обычной цепи событий. Итак, следующий пример определяет состояние кнопки по имени класса, а не по свойству.
var $self;
$('input[type=radio]').on('click', function() {
$self = $(this);
if ( $self.hasClass('is-checked') ) {
$self.prop('checked', false).removeClass('is-checked');
} else {
$self.addClass('is-checked');
}
});
Кто те, кто ищет чистое решение JavaScript, я изменил код из Jase в ответ ATL.
Я написал этот код для предложения использования с 3-позиционным переключателем в стиле CSS, который обеспечивает 4 состояния переключения (Вкл., Выкл., Нейтрально и Неактивировано).
function toggle_radio(ev) {
var radio = ev.target;
var cut_pos = radio.className.indexOf(' switcher-active');
// the switch itself
if (cut_pos !== -1) { // if the button checked it is '.switcher-active'
radio.checked = false; // toggle its state
radio.className = radio.className.slice(0, cut_pos); // remove '.switcher-active'
return true; // work is done. Break the function
}
// the button was inactive before it was clicked. Then it should became '.switcher-active'
radio.className = radio.className + ' switcher-active';
// we need to remove '.switcher-active' if either the left or right radio button was clicked. This part is uggly but I don't bother, because I'm late for barber
var radios = document.getElementsByName(radio.name); // get all these radio siblings as a collection of elements
for (var i=0; i < radios.length; i++) { // iterate through the collection
if (radios[i].className.indexOf('switcher-radio-neutral') !== -1)
continue; // skip the '.switcher-neutral' radio input
radios[i].onclick = function(ev2) {
sib_radios = document.getElementsByName(ev2.target.name); // get a group of radio inputs linked by the name
// get the '.switcher-neutral'
for (var k=0, cut_pos = -1, sib; k < sib_radios.length; k++) {
sib = sib_radios[k];
cut_pos = sib.className.indexOf(' switcher-active');
if (cut_pos !== -1)
sib.className = sib.className.slice(0, cut_pos);
}
}
}
}
var switchers = document.getElementsByClassName('switcher-radio-neutral');
for (var i=0; i < switchers.length; i++) { // bind onclick handlers
switchers[i].onclick = toggle_radio;
}.switcher {
position: relative;
display: inline-block;
margin: 1px 10px;
height: 20px;
width: 58px;
z-index: 1;
}
.switcher-off {
left: 1px;
width: 33%;
height: 100%;
}
.switcher-neutral {
left: 33%;
width: 33%;
height: 100%;
}
.switcher-on{
right: 1px;
width: 33%;
height: 100%;
}
.switcher-label {
position: absolute;
text-indent: -9999px;
z-index: 2;
}
.switcher input {
visibility: hidden;
position: absolute;
}
.switcher-slider {
height: 100%;
width: 100%;
border-radius: 10px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) inset, 0 0 4px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 1px rgba(0, 0, 0, 0.3) inset;
transition: background-color 0.2s linear 0s;
}
.switcher-slider:after {
transition: left 0.2s linear 0s, right 0.2s linear 0s;
background: linear-gradient(#D0D0D0, #FDFDFD) repeat scroll 0 0 rgba(0, 0, 0, 0);
content: "";
position: absolute;
top: 1px;
border-radius: 50%;
height: calc(100% - 2px);
width: calc(100%/3 - 1px);
box-shadow: 0 0 1px 1px #f4f4f4 inset, 0 0 3px 1px rgba(0, 0, 0, 0.6);
left: 33%;
}
.switcher-radio-on:checked ~ .switcher-slider {
background-color: #81EA89;
}
.switcher-radio-neutral:checked ~ .switcher-slider {
background: #ddd;
}
.switcher-radio-off:checked ~ .switcher-slider {
background-color: #ED8282;
}
.switcher-radio-on:checked ~ .switcher-slider:after {
left: calc(2*(100%/3));
}
.switcher-radio-neutral:checked ~ .switcher-slider:after {
left: calc(1px + 100%/3);
}
.switcher-radio-off:checked ~ .switcher-slider:after {
left: 1px;
}<form action="">
<input type="radio" name="radio_input" value="1">
<input type="radio" name="radio_input" class="switcher-radio-neutral" value="2">
<input type="radio" name="radio_input" value="3">
</form>
<br><br>
<div class="switcher">
<label class='switcher-label switcher-off' for='off'>off</label>
<input id='off' class='switcher-radio-off' type='radio' name='value' value='off'>
<label class='switcher-label switcher-neutral' for='neutral'>neutral</label>
<input id='neutral' class='switcher-radio-neutral' type='radio' name='value' value='neutral' data-neutral="">
<label class='switcher-label switcher-on' for='on'>on</label>
<input id='on' class='switcher-radio-on' type='radio' name='value' value='on'>
<div class='switcher-slider'></div>
</div> var checked = {};
$('.desectable-radio').each(function (index) {
checked[index] = this.checked;
$(this).click(function () {
if (checked[index])
this.checked = false;
for (var i in checked) {
checked[i] = false;
}
checked[index] = this.checked;
});
});
Здесь супер легкий script вы можете добавить к странице через консольное окно, которое позволяет отменить выбор радио кнопки, удерживая нажатой кнопку Ctrl, щелкая мышью.
document.addEventListener('click', function(e){
if (e.ctrlKey == true &&
e.target.tagName == 'INPUT' &&
e.target.type == "radio" &&
e.target.checked == true) {
e.target.checked = false;
}
});
Так как он не полагается на jQuery, вы можете легко добавить его на любую страницу, чтобы временно разрешить отмену выбора.
Для получения дополнительной информации вы можете прочитать статью, которую я только что написал на Как отменить радиокнопку.
Чтобы решить эту проблему, я решился на замену действующего активного переключателя кнопкой "Отменить иконка", например http://fontawesome.io/icon/ban/
При щелчке по этому значку отключен активный переключатель, который затем снова появляется, и при этом происходит сброс группы переключателей. Значок отмены также был удален из DOM.
В качестве альтернативы пользователь может щелкнуть другую из переключателей в группе, которая будет вести себя как обычно, кроме кнопки отмены, которая затем была "перемещена для замены нового активного переключателя".
Это сохранил значок отмены в интуитивном местоположении (то есть, когда пользователь нажал последний раз), и был более безопасным, чем предполагалось, что пользователь будет знать, чтобы повторно щелкнуть активный активный переключатель, чтобы отключить группу.
В худшем случае, если у вас длинный список переключателей, пользователю просто нужно щелкнуть любой из них дважды, чтобы очистить группу.
Я, должно быть, скучаю по нему, но после всех этих лет AFAIK ни одно из вышеприведенных решений, похоже, не работает, или, может быть, я просто тупой
Нет абсолютно никакой причины использовать радиокнопку, если в одной группе не более одной радиокнопки. Если это одинокая радио-кнопка, тогда просто используйте флажок. Причиной использования переключателя является выбор одного из взаимоисключающих параметров. Это означает, что любое решение, которое рассматривает только отдельные кнопки, потерпит неудачу, так как нажатие одной кнопки повлияет на состояние других кнопок.
Другими словами, поскольку мы используем радиобоксы, решение должно работать на
<input type="radio" name="foo" id="foo1"><label for="foo1">foo1</label>
<input type="radio" name="foo" id="foo2"><label for="foo2">foo2</label>
<input type="radio" name="foo" id="foo3"><label for="foo3">foo3</label>
Вот тот, который смотрит на все кнопки.
Это похоже на работу
document.querySelectorAll(
'input[type=radio][name=foo]').forEach((elem) => {
elem.addEventListener('click', allowUncheck);
// only needed if elem can be pre-checked
elem.previous = elem.checked;
});
function allowUncheck(e) {
if (this.previous) {
this.checked = false;
}
// need to update previous on all elements of this group
// (either that or store the id of the checked element)
document.querySelectorAll(
'input[type=radio][name=${this.name}]').forEach((elem) => {
elem.previous = elem.checked;
});
}body { font-size: xx-large; }
label, input {
/* added because a second click to unselect radio often
appears as a double click to select text */
-webkit-user-select: none;
user-select: none;
}<input type="radio" name="foo" id="foo1"><label for="foo1">foo1</label>
<input type="radio" name="foo" id="foo2"><label for="foo2">foo2</label>
<input type="radio" name="foo" id="foo3"><label for="foo3">foo3</label>