web-dev-qa-db-ja.com

チェックされたラジオボタンのチェックを外す方法

事は、このソリューションはFirefoxでのみ動作することです

$(':radio').on("change", function(event) {
  $(this).prop('checked', true);
});

$(':radio').on("click", function(event) {
  $(this).prop('checked', false);
});

クロムでは、何も選択できません http://jsfiddle.net/wuAWn/

Ofc、変数を使用して次のように書くことができます

var val = -1;
$(':radio').on("click", function() {
  if($(this).val() == val) {
    $(this).prop('checked', false);
    val = -1;
  }
  else val = $(this).val();
});

しかし、私はページにラジオボタングループをほとんど持たず、htmlコンテンツはajaxを介してロードされるため、すべてのラジオボタングループに変数を定義してすべてのラジオボタンに同じ関数を書くのではなく、それらすべてに1つの関数を書き込みたいと思いますグループ。

編集：チェックボックスのヘルプに感謝しますが、ラジオボタングループとして機能するチェックボックスについては、同じ名前のonclickの他のすべてのチェックボックスをオフにするadittional javascripを書く必要があります、私はすでにラジオボタンCSSを持っていますlook-like-checkboxのようなクラスを追加し、チェックボックスのように見せます。カスタムルックに統一ライブラリを使用します。とにかく、ここに私の奇妙なソリューションがあります http://jsfiddle.net/wuAWn/9/

javascriptjqueryradio-button
29
ccd580ac6753941c6f84fe2e19f229

この単純なスクリプトを使用すると、すでにチェックされているラジオボタンをオフにすることができます。すべてのJavaScript対応ブラウザで動作します。

var allRadios = document.getElementsByName('re');
var booRadio;
var x = 0;
for(x = 0; x < allRadios.length; x++){
  allRadios[x].onclick = function() {
    if(booRadio == this){
      this.checked = false;
      booRadio = null;
    } else {
      booRadio = this;
    }
  };
}
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>
<input type='radio' class='radio-button' name='re'>
37
Kzest

ラジオボタンは必須オプションです...チェックを外したい場合、チェックボックスを使用します。物事を複雑にし、ユーザーがラジオボタンのチェックを外せるようにする必要はありません。 JQueryを削除すると、そのうちの1つから選択できます

10
Brad

「なし」などのラベルが付けられた各グループに追加のラジオボタンを追加することを検討してください。これにより、開発プロセスを複雑にすることなく、一貫したユーザーエクスペリエンスを作成できます。

7
olleicua

これを試して

すべてのラジオの単一機能にはクラス "radio-button"があります

作業chromeおよびFF

$('.radio-button').on("click", function(event){
  $('.radio-button').prop('checked', false);
  $(this).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type='radio' class='radio-button' name='re'>
<input type='radio'  class='radio-button' name='re'>
<input type='radio'  class='radio-button' name='re'>
3
sangram parmar