Як зробити перемикач знятим, натиснувши його?

На відміну від прапорців, користувачеві неможливо скасувати вибір кнопок після натискання. Чи є спосіб, щоб їх можна було програмно перемикати за допомогою Javascript? Це було б бажано без використання jQuery.

Ви можете встановити властивість HTML об'єкта , checkedщоб , falseяк це:

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

Приклад: Утримуйте клавішу Ctrl( ⌘на mac), щоб зняти прапорець.

var radios = document.getElementsByTagName('input');
for(i=0; i<radios.length; i++ ) {
    radios[i].onclick = function(e) {
        if(e.ctrlKey || e.metaKey) {
            this.checked = false;
        }
    }
}

<input type="radio" name="test" value="1" />
<input type="radio" name="test" value="2" checked="checked" />
<input type="radio" name="test" value="3" />

Приклад jQuery

Радіокнопки призначені для використання в групах, як це визначається спільним використанням одного і того ж nameатрибута. Потім клацання на одному з них скасовує вибір поточного вибраного. Щоб дозволити користувачеві скасувати “реальний” вибір, який він зробив, ви можете включити перемикач, який відповідає нульовому вибору, наприклад “Не знаю” чи “Немає відповіді”.

Якщо вам потрібна одна кнопка, яку можна встановити або зняти, встановіть прапорець.

Можна (але, як правило, це не актуально), зняти прапорець у JavaScript, просто встановивши для його checkedвластивості значення false, наприклад

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

Це моя відповідь (хоча я зробив це за допомогою jQuery, але лише з метою вибору елементів та додавання та видалення класу, щоб ви могли легко замінити його на чисті селектори JS та атрибут pure JS add)

<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");
    };
})

Загорнуто в плагін

Обмеження:

1. Потрібен елемент форми
2. Потрібно викликати подію клацання при програмній зміні перемикача

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

Оскільки перемикач, який в основному використовується в групі, набагато легше захопити їх 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;
    }
    };

}

Цей посібник пояснить, як працює код із візуальною демонстрацією.

хоча це було задано з точки зору 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">

Старе запитання, але люди постійно надходять з 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/>

Як зняття прапорця радіо працює (не) працює

Ви не можете легко реалізувати знімання галочки тривіально за допомогою if(this.checked) this.checked = false(якщо ви дійсно хочете, див. Спосіб хакера в кінці), оскільки події запускаються в такому порядку:

1. mousedown або keydown
2. mouseup або keyup
3. якщо не позначено, встановіть перевірене властивість зараз
4. click
5. input (лише за умови зміни стану)
6. change (лише за умови зміни стану)

Тепер, в якому випадку виконати згадане зняття?

• mouseup або mousedown : тоді на кроці 3 значення повертається до істини, а подія зміни та введення навіть не спрацьовує, оскільки стан не змінився, коли вони викликані в послідовності - тому ви не можете зняти його тут
• click: тоді стан завжди хибний, а введення та зміни також не спрацьовують - тому ви не можете це перевірити
• inputабо change: він не спрацьовує, коли стан не змінюється, а клацання виділеного елемента не змінює стан - тому ви не можете зробити тут нічого корисного

Наївний спосіб

Як ви можете дізнатися з наведеної вище послідовності, такий спосіб:

1. прочитати попередній стан у mouseup
2. встановити державу clickяк заперечення попереднього стану

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

radio.onmouseup = function() { this.dataset.checked = this.checked? 1 : ""; }
radio.onclick = function() { this.checked = !this.dataset.checked; }

Здається, це працює, але ви не повинні робити цього з цих причин:

• користувач може mousedownдесь в іншому місці, потім наведіть курсор на перемикач, потімmouseup : у цьому випадку вказівник миші спрацьовує, а клацання ні
• користувач може використовувати Tabдля фокусування радіогрупи, а потім arrowsдля зміни: вказівник миші не спрацьовує, а натискання робить

Правильний спосіб

Є ще одна проблема: динамічно додані перемикачі. Є два шляхи:

1. element.appendChild(radio) - якщо ви ввімкнете скасування вибору на всіх радіостанціях в DOMContentLoaded , це динамічно додане радіо не вплине
2. element.innerHTML+= '<input type="radio">' - ефективно замінює вміст HTML елемента і відтворює всередині нього DOM - тому всі прослуховувачі подій відкидаються

Для вирішення (2) я рекомендую атрибут onclick content . Зауважте, що element.onclick = fnі - element.setAttribute("onclick", "fn()")це дві різні речі. Також зверніть увагу, що onclickспрацьовує щоразу, коли користувач активує радіо, незалежно від використовуваного ним інтерфейсу.

Ще одна проблема: якщо ви ввімкнули скасувати вибір, вам слід також увімкнути перемикання, Spaceщоб імітувати поведінку прапорців. Наступний код вирішує всі згадані проблеми:

function deselectableRadios(rootElement) {
  if(!rootElement) rootElement = document;
  if(!window.radioChecked) window.radioChecked = null;
  window.radioClick = function(e) {
    const obj = e.target;
    if(e.keyCode) return obj.checked = e.keyCode!=32;
    obj.checked = window.radioChecked != obj;
    window.radioChecked = obj.checked ? obj : null;
  }
  rootElement.querySelectorAll("input[type='radio']").forEach( radio => {
    radio.setAttribute("onclick", "radioClick(event)");
    radio.setAttribute("onkeyup", "radioClick(event)");
  });
}

deselectableRadios();

<label><input type="radio" name="tag1">one</label>
<label><input type="radio" name="tag1">two</label>
<label><input type="radio" name="tag1">three</label>
<label><input type="radio" name="tag1">four</label>

Тепер ви можете дзвонити в deselectableRadios()будь-який час, коли динамічно додаєте вміст, і дзвінок по радіо кілька разів не порушує його. Ви також можете вказатиrootElement для оновлення лише піддерева HTML DOM і зробити ваш Інтернет швидшим. Якщо вам не подобається глобальний стан, ви можете використати хакерський спосіб:

Хакерський спосіб

Справа в тому , щоб зловжити setTimeoutна mouseupназивати його після того, як перевірене властивість встановлено:

function deselectable() {
  setTimeout(checked => this.checked = !checked, 0, this.checked);
}

Тепер ви можете зробити будь-який перемикач неможливим:

radio.onmouseup = deselectable;

Але цей простий одношаровий лайнер працює лише з клацанням і не вирішує проблеми, згадані вище.

Сучасний спосіб

Вибирається радіо - це в основному прапорець, де можна перевірити лише одного в групі. Якщо ваш браузер підтримує функцію зовнішнього вигляду CSS4, ви можете просто

<input type="checkbox" name="foo" style="appearance: radio">

а потім у onclickвипадку getElementsByName("foo")і зніміть усі позначки, що залишилися від імені (прапорці не надсилають значення, якщо вони не позначені).

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

Наявність у користувача Control + клацання майже так само добре, як і зняття з нього прапорця через консоль. Ловити мишоудано рано, а натискання - занадто пізно.

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

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>

Ось до чого я прийшов:

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/

Код створення об'єкта перемикача включає ці три рядки:

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

Розширення відповіді користувача3716078, щоб дозволити декілька незалежних груп перемикачів та більш акуратний спосіб призначення слухачів подій для кількох елементів ...

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);

    });

}

Повний приклад на чистому JavaScript:

box.onmouseup = function() {
  var temp = this.children[0];
  if (temp.checked) {
    setTimeout(function() {
      temp.checked = false;
    }, 0);
  }
}

<label id='box' style='margin-right: 1em;'>
  <input type='radio' name='chk_préf_méd_perso' value='valeur'>
  libellé
</label>

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

const radios = Array.from(document.getElementsByClassName('radio'))

for(let i of radios) {
    i.state = false

    i.onclick = () => {
        i.checked = i.state = !i.state

        for(let j of radios)
            if(j !== i) j.checked = j.state = false
    }
}

<input class="radio" type="radio">X
<input class="radio" type="radio">Y
<input class="radio" type="radio">Z

Тепер я хотів реалізувати це на своєму проекті rails, який має кілька форм (залежить, завантажується з бази даних), кожна форма має 2 видимі перемикачі + 1 приховану перемикач.

Я хочу, щоб користувач вибрав / скасував вибір перемикача для кожної форми. І вибір однієї з форм не повинен скасувати вибір іншої обраної кнопки в іншій формі. Тому я скоріше зробив це:

var radios = Array.from(document.getElementsByClassName('radio'))

for (let i of radios) {
  i.state = false

  i.onclick = () => {
    i.checked = i.state = !i.state

    for (let j of radios)
      if (j !== i) j.state = false
  }
}

<form>
  <input class="radio" name="A" type="radio">A
  <input class="radio" name="A" type="radio">B
  <input class="radio" name="A" type="radio">C
</form>

<form>
  <input class="radio" name="A" type="radio">D
  <input class="radio" name="A" type="radio">E
  <input class="radio" name="A" type="radio">F
</form>

<form>
  <input class="radio" name="SOMETHING" type="radio">G
  <input class="radio" name="SOMETHING" type="radio">H
  <input class="radio" name="SOMETHING" type="radio">I
</form>

Ви бачите, що всі мають однакові назви, але вони мають різні форми, згруповані по 3, тому це працює для кількох форм.

Я здивований, що ніхто не публікував цю версію " акуратного трюку ", яка не використовує жодного JavaScript , а лише CSS.

#radio1 {
    display: none;
}

#wrapper {
    /* NOTE: This wrapper div is not needed provided you can position the label for #radio1 on top of #radio2 using some other technique. */
    position: relative;
}

#radio1:not(:checked) ~ * label[for="radio1"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#radio1:checked ~ * label[for="radio1"] {
    display: none;
}

/* Non-essential styles: */ 

label[for],
label:not([for="radio1"]) {
    cursor: pointer;
    border-radius: 7px;
}
label[for]:hover + label,
label:not([for="radio1"]):hover {
    background-color: #ccc;
}

<input type="radio" name="group1" id="radio1" checked="checked"  />

<p>Look mum, <strong>no JavaScript!</strong></p>

<div id="wrapper">
    <label for="radio1"></label>
    <label>
        <input type="radio" name="group1" id="radio2" />
        You can toggle me on and off!
    </label>
</div>

Пояснення:

• #radio1 (<input type="radio" id="radio2" /> ) завжди приховано.
• Використання CSS :checked і :not(:checked)селектори псевдо-класу з двійників селектор ( +і ~) дозволяють стиль інших елементів , які будуть порушені в залежності від того , чи ні , <input type="checkbox" />чи <input type="radio" />перевіряється.
  • Тому , коли #radio1буде ип -checked (або коли #radio2перевіряється) , що призводить до того , <label>щоб бути накладено на верхній частині #radio2і що етикетка for="radio1", тому клацання викликатиме #radio1для перевірки, чи не #radio2.
  • ВАЖЛИВА ПЕЧЕРА : Правила вибору братів і сестер CSS дозволяють селекторам лише вибирати елементи на основі своїх предків та попередніх братів і сестер . Отже, ви не можете стилізувати елемент на основі будь-яких інших нащадків його предків.
    • Це обмеження буде знято, коли підтримується :has()функція селектора CSS4, але станом на листопад 2020 року підтримується лише PrinceXML, :has()і на даний момент, схоже, воно :has()буде повністю вилучене з CSS4 через складність реалізації.

Цей підхід можна масштабувати для підтримки декількох перемикачів:

#uncheckAll {
    display: none;
}

#uncheckAll:checked ~ * label[for="uncheckAll"] {
    display: none;
}

label {
    cursor: pointer;
}

label:not([for]) {
    position: relative;
}

label[for="uncheckAll"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

input[name="group1"]:not(:checked) + label[for="uncheckAll"] {
    display: none;
}

<input type="radio" name="group1" id="uncheckAll" checked="checked"  />

<label>
    <input type="radio" name="group1" id="radio2" />
    <label for="uncheckAll"></label>
    You can toggle me on and off!
</label>

<label>
    <input type="radio" name="group1" id="radio3" />
    <label for="uncheckAll"></label>
    And me!
</label>

<label>
    <input type="radio" name="group1" id="aragorn" />
    <label for="uncheckAll"></label>
    And my sword!
</label>

<label>
    <input type="radio" name="group1" id="gimli" />
    <label for="uncheckAll"></label>
    And my axe!
</label>

Більшість сучасних браузерів дня вважає , checked="anything"як checked="true".

Можливо, вам доведеться видалити перевірений атрибут, якщо це має сенс у вашому випадку, один із яких може бути пов’язаний із завантаженням сторінки.

$(this).removeAttr('checked')

Це може допомогти вам у випадках, коли ви хочете, щоб перевірка вашого перемикача відповідала певним умовам. Ви можете просто видалити атрибут, щоб досягти цього.

PS: Не корисно у всіх випадках.

Ось спосіб для простого JS, який onchangeі onclickподії поєднуються ( onchangeдля перевірки onclickта зняття позначки).

document.querySelector("input").onchange = function() {
    this.onclick = function() {
        this.checked = false;
        this.onclick = null;
    }
};

Якщо ви шукаєте рішення в jQuery, ось воно. Це схоже на це

    $('input:radio').click(function() { 
      let name = $(this).attr('name');
      let self = $(this);
      [].filter.call($(`input[name=${name}]`), function(ele){
        return self[0] !== $(ele)[0];
      }).forEach(function(otherEle){
        $(otherEle).removeAttr('data-check');
      });

      if($(this).attr('data-check')){
        $(this).prop("checked", false);
        $(this).removeAttr('data-check');
      }else{
        $(this).attr("data-check", "1");
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input class="radio" name="A" type="radio">A
  <input class="radio" name="A" type="radio">B
  <input class="radio" name="A" type="radio">C
</form>

<form>
  <input class="radio" name="B" type="radio">D
  <input class="radio" name="B" type="radio">E
  <input class="radio" name="B" type="radio">F
</form>

<form>
  <input class="radio" name="C" type="radio">G
  <input class="radio" name="C" type="radio">H
  <input class="radio" name="C" type="radio">I
</form>

Ви можете використовувати 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/

Повний код буде виглядати приблизно так

<!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>

Ось приклад того, де, мабуть, доречно зняти прапорець, крім як зробити новий вибір. У мене є словник, записи якого можна вибрати за допомогою різноманітних покажчиків. Який індекс використовувати, обирається за допомогою набору перемикачів. Однак є також кнопка "довільний запис", яку користувач може використовувати, якщо він просто хоче переглянути. Залишення індексу на місці, коли запис було обрано за допомогою кнопки випадкового введення, було б оманливим, тому, коли ця кнопка натиснута, я знімаю всі перемикачі вибору індексу та замінюю вміст кадру індексу порожньою сторінкою .

Якщо ви використовуєте плагін Iclick, це так просто, як ви бачите нижче.

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

На жаль, це не працює в 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); });

Працююче безкоштовне оновлення відповіді Шмілі Бройер.

(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");
        }
    });
})();

Це майже спрацювало для мене.

<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");
    };
})

Але якщо я перевіряю перемикач, то перевіряю інший і намагаюся перевірити перший ще раз, я повинен зробити два клацання. Це тому, що він має клас imChecked. Мені просто потрібно було зняти галочку з інших перемикачів перед підтвердженням.

Додайте цей рядок, щоб це працювало:

$ ("input [name = 'radioBtn']"). not (thisRadio) .removeClass ("imChecked");

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

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

Наведений нижче код зробить трюк.

$('input[type=radio]').click(function() {
        if($(this).hasClass("checked")){
            this.checked = false;
            $(this).removeClass("checked")
        }else{
            $(this).addClass("checked")
        }
    });

Припустимо, у вас є кнопка, де, натиснувши її, ви можете зробити всі вибрані вами перемикачі фальшивими. Ви можете написати наведений нижче код всередині обробника onclick.
Нижче коду візьміть перемикачі на основі назви класу, і для кожного елемента він позначить його як помилковий.

var elements=document.getElementsByClassName('Button');

Array.prototype.forEach.call(elements, function(element) {
  element.checked = false;
});