Подтвердить что ты не робот

Как отключить переключатель, нажав на него?

В отличие от флажков, пользователь не может отменить выбор переключателей после их нажатия. Есть ли способ, с помощью которого можно программно использовать Javascript? Это было бы желательно без использования jQuery.

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете установить свойство объекта HTML checked на false следующим образом:

document.getElementById('desiredInput').checked = false;

Пример JavaScript

Пример jQuery

PS: Удерживайте нажатой клавишу Ctrl, чтобы снять отметку.

Ответ 2

Радиокнопки предназначены для использования в группах, как определено их совместным использованием одного и того же атрибута name. Затем нажатие на один из них отменяет выбор текущего выбранного. Чтобы позволить пользователю отменить "реальный" выбор, который он сделал, вы можете включить переключатель, который соответствует нулевому выбору, например "Не знаю" или "Нет ответа".

Если вам нужна одна кнопка, которую можно проверить или снять, установите флажок.

Можно (но обычно не уместно) отключить радиокнопку в JavaScript, просто установив для свойства checked значение false, например

<input type=radio name=foo id=foo value=var>
<input type=button value="Uncheck" onclick=
"document.getElementById('foo').checked = false">

Ответ 3

Это мой ответ (хотя я сделал это с помощью jQuery, но только для селекторов и добавил и удалил класс, поэтому вы можете легко заменить его чистыми селекторами JS и атрибутом чистого JS)

<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>
<input type='radio' name='radioBtn'>

$(document).on("click", "input[name='radioBtn']", function(){
    thisRadio = $(this);
    if (thisRadio.hasClass("imChecked")) {
        thisRadio.removeClass("imChecked");
        thisRadio.prop('checked', false);
    } else { 
        thisRadio.prop('checked', true);
        thisRadio.addClass("imChecked");
    };
})

Ответ 4

Завершена в плагин

Ограничения:

  • Требовать элемент формы
  • Должен запускать событие щелчка при программном изменении переключателя.

(function($) {
  $.fn.uncheckableRadio = function() {
    var $root = this;
    $root.each(function() {
      var $radio = $(this);
      if ($radio.prop('checked')) {
        $radio.data('checked', true);
      } else {
        $radio.data('checked', false);
      }
        
      $radio.click(function() {
        var $this = $(this);
        if ($this.data('checked')) {
          $this.prop('checked', false);
          $this.data('checked', false);
          $this.trigger('change');
        } else {
          $this.data('checked', true);
          $this.closest('form').find('[name="' + $this.prop('name') + '"]').not($this).data('checked', false);
        }
      });
    });
    return $root;
  };
}(jQuery));

$('[type=radio]').uncheckableRadio();
$('button').click(function() {
  $('[value=V2]').prop('checked', true).trigger('change').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <label><input name="myRadio" type="radio" value="V1" /> R1</label>
  <label><input name="myRadio" type="radio" value="V2" /> R2</label>
  <label><input name="myRadio" type="radio" value="V3" /> R3</label>
  <button type="button">Change R2</button>
</form>

Ответ 5

Поскольку радио-кнопка в основном используется в группе, ее гораздо проще получить с помощью getElementsByName( ' ' ); в вашем теге сценария. Это вернет массив, поместит прослушиватель событий в каждый дочерний массив и установит состояние проверки. Посмотрите на этот образец.

var myRadios = document.getElementsByName('subscribe');
var setCheck;
var x = 0;
for(x = 0; x < myRadios.length; x++){

    myRadios[x].onclick = function(){
        if(setCheck != this){
             setCheck = this;
        }else{
            this.checked = false;
            setCheck = null;
    }
    };

}

В этом руководстве объясняется, как код работает с визуальной демонстрацией.

Ответ 6

То, к чему я пришел:

function uncheck_radio_before_click(radio) {
    if(radio.prop('checked'))
        radio.one('click', function(){ radio.prop('checked', false); } );
}
$('body').on('mouseup', 'input[type="radio"]', function(){
    var radio=$(this);
    uncheck_radio_before_click(radio);
})
$('body').on('mouseup', 'label', function(){
    var label=$(this);
    var radio;
    if(label.attr('for'))
        radio=$('#'+label.attr('for')).filter('input[type="radio"]');
    else
        radio=label.children('input[type="radio"]');
    if(radio.length)
        uncheck_radio_before_click(radio);
})

http://jsfiddle.net/24vft2of/2/

Ответ 7

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

Наличие пользовательского элемента управления + щелчок почти так же хорош, как их снятие с экрана через консоль. Поймать мускулатуру рано, а onclick - слишком поздно.

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

window.onload = function(){
document.querySelectorAll("INPUT[type='radio']").forEach(function(rd){rd.addEventListener("mousedown",
	function(){
		if (this.checked) {this.onclick=function(){this.checked=false}} else{this.onclick=null}
	})})}
<input type=radio name=unchecksample> Number One<br>
<input type=radio name=unchecksample> Number Two<br>
<input type=radio name=unchecksample> Number Three<br>
<input type=radio name=unchecksample> Number Four<br>
<input type=radio name=unchecksample> Number Five<br>

Ответ 8

когда он задавался с точки зрения javascript, адаптация из jquery тривиальна... с помощью этого метода вы можете проверить значение "null" и передать его...

var checked_val = "null";
$(".no_option").on("click", function(){
  if($(this).val() == checked_val){
  	$('input[name=group][value=null]').prop("checked",true);
    checked_val = "null";
  }else{
  	checked_val = $(this).val();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="group" class="no_option" value="0">option 0<br>
<input type="radio" name="group" class="no_option" value="1">option 1<br>
<input type="radio" name="group" class="no_option" value="2">option 2<br>
<input type="radio" name="group" class="no_option" value="3">option 3<br>
<input type="radio" name="group" class="no_option" value="4">option 4<br>
<input type="radio" name="group" class="no_option" value="5">option 5<br>
<input type="radio" name="group" class="no_option" value="6">option 6<br>
<input type="radio" name="group" class="no_option" value="null" style="display:none">

Ответ 9

Расширение user3716078 Ответьте, чтобы разрешить несколько независимых групп переключателей и более простой способ назначить прослушиватели событий нескольким элементам...

window.onload = function() {

    var acc_checked=[];

    [].slice.call(document.querySelectorAll('.accordion input[type="radio"]')).forEach(function(el,i){
        /**
         * i represents the integer value of where we are in the loop
         * el represents the element in question in the current loop
         */
        el.addEventListener('click', function(e){

            if(acc_checked[this.name] != this) {
                acc_checked[this.name] = this;
            } else {
                this.checked = false;
                acc_checked[this.name] = null;
            }

        }, false);

    });

}

Ответ 10

Вы можете использовать свойство checked для переключателя, чтобы снять флажок.

Что-то вроде этого:

<script>
 function uncheck()
 {
  document.getElementById('myRadio').checked = false;        
 }
 function check()
 {
  document.getElementById('myRadio').checked = true;        
 }
</script>
<input id="myRadio" type="radio" checked="checked"/>
<button onclick="uncheck();">Uncheck</button>
<button onclick="check();">Check</button>

Смотрите здесь: http://jsfiddle.net/wgYNa/

Ответ 11

Полный код будет выглядеть примерно так.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<input name="radio" type="radio" id="myRadio" value="myRadio" checked="checked"     onclick="setRadio(this)" />
<label for="myRadio"></label>


<script language="javascript">
function setRadio(obj) 
{
    obj.checked = false;
}
</script>
</body>
</html>

Ответ 12

Вот пример того, где, возможно, целесообразно отключить переключатели, кроме как путем создания нового выбора. У меня есть словарь, чьи записи могут быть выбраны с использованием различных индексов. Какой индекс для использования выбирается с помощью набора переключателей. Тем не менее, есть также кнопка "случайного ввода", которую пользователь может использовать, если он или она просто хочет просмотреть. Оставляя индекс на месте, когда запись была выбрана с помощью кнопки случайного ввода, будет вводить в заблуждение, поэтому, когда эта кнопка будет нажата, я сниму галочку всех переключателей выбора индекса и заменим содержимое индексного фрейма пустой страницей.

Ответ 13

Если вы используете плагин Iclick, это будет так же просто, как вы видите ниже.

 $('#radio1').iCheck('uncheck');

Ответ 14

В коде создания объекта переключателя включите эти три строки:

  obj.check2 = false;    // add 'check2', a user-defined object property
  obj.onmouseup = function() { this.check2 = this.checked };
  obj.onclick = function() { this.checked = !this.check2 };

Ответ 15

К сожалению, он не работает в Chrome или Edge, но работает в FireFox:

$(document)
// uncheck it when clicked
.on("click","input[type='radio']", function(){ $(this).prop("checked",false); })
// re-check it if value is changed to this input
.on("change","input[type='radio']", function(){ $(this).prop("checked",true); });

Ответ 16

Полный пример на чистом JavaScript:

    <label style='margin-right: 1em;' onmouseup='var temp = this.children[0]; if (temp.checked) { setTimeout(function() { temp.checked = false; }, 0); }'><input type='radio' name='chk_préf_méd_perso' value='valeur'>libellé</label>

Ответ 17

Старый вопрос, но люди продолжают приходить сюда из Google, а OP задают предпочтительно без jQuery, так что вот мой снимок.

Должно работать даже на IE 9

// iterate using Array method for compatibility
Array.prototype.forEach.call(document.querySelectorAll('[type=radio]'), function(radio) {
	radio.addEventListener('click', function(){
		var self = this;
		// get all elements with same name but itself and mark them unchecked
		Array.prototype.filter.call(document.getElementsByName(this.name), function(filterEl) {
			return self !== filterEl;
		}).forEach(function(otherEl) {
			delete otherEl.dataset.check
		})

		// set state based on previous one
		if (this.dataset.hasOwnProperty('check')) {
			this.checked = false
			delete this.dataset.check
		} else {
			this.dataset.check = ''
		}
	}, false)
})
<label><input type="radio" name="foo" value="1"/>foo = 1</label><br/>
<label><input type="radio" name="foo" value="2"/>foo = 2</label><br/>
<label><input type="radio" name="foo" value="3"/>foo = 3</label><br/>
<br/>
<label><input type="radio" name="bar" value="1"/>bar = 1</label><br/>
<label><input type="radio" name="bar" value="2"/>bar = 2</label><br/>
<label><input type="radio" name="bar" value="3"/>bar = 3</label><br/>

Ответ 18

Работающее бесплатное обновление для ответа Шмили Брейера.

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

        // update and remove the previous checked class
        var $prevChecked = $('input[name=' + $this.attr('name') + ']:not(:checked).checked');
            $prevChecked.removeClass('checked');

        if( $this.hasClass("checked") ) {
            $this.removeClass("checked");
            $this.prop("checked", false);
        }
        else {
            $this.addClass("checked");
        }
    });
})();