チェックボックスは通常複数選択できるものなのですが、それを択一にしたいというご要望がありました。こういうのはjQueryが得意なのでjQuery でラジオボタンみたいに択一になるように書いてみました。かなり簡単ですのでお試しください。
普通のチェックボックスとラジオボタンの動き
通常チェックボックスは複数選択可能にしたいときに使います。ラジオボタンはどれか1つだけを選択して欲しいときに使います。
ということで
こんな感じの動きだと思います。
サンプルページ
ラジオボタンだと一度チェックを付けると外すことができない
ラジオボタンだと一度チェックを付けるとどれも選ばない状態にすることができません。そこでチェックボックスなら全てを未選択にできるのでチェックボックスにしてなおかつ１つしか選べないようにしたいという場合があったりします。
これをjQueryでこんな感じに書いて実現しました。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
.setsumei {
padding:5px;
font-size:1.2em;
font-weight:bold;
}
.contentBlock {
margin-bottom:15px;
}
</style>
<script type="text/javascript">
jQuery(function($){
$(function(){
$('.colorGroup').on('click', function() {
if ($(this).prop('checked')){
// 一旦全てをクリアして再チェックする
$('.colorGroup').prop('checked', false);
$(this).prop('checked', true);
}
});
});
});
</script>
</head>
<body>
<div style="margin-left:100px;">
<div class="contentBlock">
<div class="setsumei">チェックボックスで択一にしたいときはjQueryで可能</div>
<div>
<input type="checkbox" name="color" class="colorGroup" value="赤">赤
<input type="checkbox" name="color" class="colorGroup" value="白">白
<input type="checkbox" name="color" class="colorGroup" value="黄色">黄色
</div>
</div>
</div>
</body>
</html>
部分的に説明すると、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
というところでjQueryを使えるようにライブラリを読み込みます。
<input type="checkbox" name="color" class="colorGroup" value="赤">赤
<input type="checkbox" name="color" class="colorGroup" value="白">白
<input type="checkbox" name="color" class="colorGroup" value="黄色">黄色
３つのチェックボックスに colorGroup という名前のclassを指定しておきます。
実際にjQueryで動作させてる部分は
<script type="text/javascript">
jQuery(function($){
$(function(){
$('.colorGroup').on('click', function() {
if ($(this).prop('checked')){
// 一旦全てをクリアして再チェックする
$('.colorGroup').prop('checked', false);
$(this).prop('checked', true);
}
});
});
});
</script>
ここになります。
$('.colorGroup').on('click', function() {
上はcolorGroupというclass指定のあるものを クリックしたときにここに来るようになります。
if ($(this).prop('checked')){
ここで this（今クリックした要素） が チェックされていたら と聞きます
// 一旦全てをクリアして再チェックする
$('.colorGroup').prop('checked', false);
ここで colorGroupというclass指定のしてある、checkedをfalse（チェックを外す）にします。３つとも一度ここでチェックが外れます。
$(this).prop('checked', true);
全部のチェックを外してから、this（今クリックした要素）のcheckedをtrue（チェックを付ける）にします。
これでチェックは１つしかつかないが実現します。
こんな感じです。１つしか付かないし、全部外すこともできます。
サンプルページ
radioボタンで未選択をするこんな方法もあります
好みによりますが、jQueryを使わなくてもradioボタンで未選択をする方法があります。
こんな感じに「（未選択の項目）なし」を選択肢に入れておく方法です。
サンプルページ
またこのようにjQueryでは色々なことができるのでおそらくラジオボタンのとなりに「全部未選択に戻す」かなんかのボタンを作ってそれをクリックしたときにラジオボタンをすべて未選択にするとかもできそうですね。
最近jQueryが色々面白くなってきて、以前買って読んだこの本の新版が出たようなのでまた買ってみようかなと思っています(^^)/。とっても分かりやすかったです。
コメント
コメント一覧 （4件）
兎本さま、
ありがとうございました。
参考になりました。
お
おさむさま、こんにちは！参考になったとお知らせいただきうれしく思います。よ(^^)/
やりたい事が、ラジオボタンではなく、こちらの方法で実現できました。
ありがとうございます！
pao Kさん、こんにちは！ご利用ありがとうございます。記事がお役に立てたこと、コメントいただいてわかってうれしく思います！