0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Javascript]inputのチェックボックスでチェックを一つしかつけさせない

Posted at

HTMLのinputで指定できるチェックボックス(checkbox)。

一つしか選択させたくない場合はまあラジオボタンにしておけという話かもしれないが、どうしてもチェックボックスでやりたい場合の方法をJQuery&JS両方で紹介。

oncheck.js
//Jqueryの場合
$(".inputClass").on("click", function(){
   $('.inputClass').prop('checked', false);
   $(this).prop('checked', true);
}); 

//JSの場合
const inputClass = document.getElementsByClassName("inputclass");
for(let i=0;i<inputClass.length;i++){
  inputClass[i].onclick = function(){
      for(let u=0;u<inputClass.length;u++){
        inputClass[u].checked = false;
        this.checked = true;
      }
   }
} 

入れ子で分かりづらいが、指定したクラスを持つすべてのinputにonclickを追加している。
onclickの先で、一度全てのinputのチェックを外し、onclickが発動したinputだけチェックを付けている。

HTMLはこんなの↓を想定

check3.html
<input type="checkbox" class="inputclass">1
<input type="checkbox" class="inputclass">2
<input type="checkbox" class="inputclass">3

余談だが、やはりinputはお堅いフォーム以外の場合での装飾にlabelを使わないといけないのがすごくめんどくさい。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?