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を使わないといけないのがすごくめんどくさい。