[JavaScript] チェックを消せるラジオボタン

投稿日：2016年11月4日更新日：2018年5月2日

クリックするとオン、オフができるラジオボタンのサンプルです。

サンプルソース

例）チェックオンのラジオボタンをクリックするとオフにする

//value値を保持する変数
var nowVal;

function fnc(obj){
  if(nowVal == obj.value){
    obj.checked = false;
    nowVal = "";
  }else{
    nowVal = obj.value;
  }
}

//value値を保持する変数

var nowVal;

function fnc(obj){

if(nowVal == obj.value){

obj.checked = false;

nowVal = "";

}else{

nowVal = obj.value;

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="radio" name="rdo1" value="1" onclick="fnc(this);" />
  <input type="radio" name="rdo1" value="2" onclick="fnc(this);" />
  <input type="radio" name="rdo1" value="3" onclick="fnc(this);" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

チェックオンのラジオボタンをクリックするとチェックを消すことができます。

ラジオ１ラジオ２ラジオ３

解説

選択中ラジオボタンの値を常に保持して、ラジオボタンがクリックされたらその値と比較して同じならチェックを消すことで実現しています。

執筆者：とら