チェックボックスの一括選択/解除とCSSによる装飾を共存させたい

表題の通り、チェックボックスの一括選択・解除とCSSによる装飾を共存させたいです。

現在一括選択をjQueryで以下のように実現しています。

html
1<li><label><input type="checkbox" value="" id="allcheck" onclick="allCheck();">全てチェック／解除</label></li>
2<li><label><input type="checkbox" class="onecheck" name="genre[]" value="1" onclick="oneCheck();" />ジャンル1</label></li>
3<li><label><input type="checkbox" class="onecheck" name="genre[]" value="2" onclick="oneCheck();" />ジャンル2</label></li>
4<li><label><input type="checkbox" class="onecheck" name="genre[]" value="3" onclick="oneCheck();" />ジャンル3</label></li>
5<li><label><input type="checkbox" class="onecheck" name="genre[]" value="4" onclick="oneCheck();" />ジャンル4</label></li>
6<li><label><input type="checkbox" class="onecheck" name="genre[]" value="5" onclick="oneCheck();" />ジャンル5</label></li>

javascript
1<script type="text/javascript">
2//全選択チェックボックス用処理
3function allCheck() {
4    if ($("#allcheck").is(":checked")) {
5        $(".onecheck").attr("checked", true);
6    } else {
7        $(".onecheck").attr("checked", false);
8    }
9}
10
11//個別選択チェックボックス用処理
12function oneCheck() {
13    var count = $(".onecheck").length;
14
15    for (var i=0; i<count; i++) {
16        if (!$(".onecheck").eq(i).is(":checked")) {
17            $("#allcheck").attr("checked", false);
18            return;
19        }
20    }
21    $("#allcheck").attr("checked", true);
22}
23</script>

これだけなら何の問題もないのですが、ここにCSSで装飾をしたいです。
CSSは詳しくないのでいろいろなサイトを見ているのですが、たいていが

CSS
1 input[type=checkbox] {
2	display: none;
3}

とすることで本来のチェックボックスを見えなくしているせいか、一括チェックとの共存ができません。

どちらもまとめて設定できるような方法があれば一番ですが、なければどのような方法でもいいのでご教授いただければと思います。

ちなみにli要素のnema属性に関しては、PHPの処理に必要なので変更ができません。
よろしくお願いいたします。

T.Yokotani

2016/03/16 06:13

cssを見る限りだと全チェックの項目も見えないということになりますが、その認識であってますか？

ao_love

2016/03/16 06:17

はい、間違いありません。チェックボックスすべてのデザインを上書きしているので、全チェックの項目もチェックボックスは見えていないです。

T.Yokotani

2016/03/16 06:52

回答の方でも書かれている方がいらっしゃいますが、イベントの発生方法を記載いただけますと、返答しやすいかと思います。

think49

2016/03/16 07:51

label要素がクリックされれば対応するinput要素も発火します。

T.Yokotani

2016/03/16 08:40

チェックボックスだけ隠している感じでしたね。失礼いたしました。

行動規範の内容に同意します

回答5件

ベストアンサー

擬似クラス :checked を使いますが、Selectors API 4 の :has がないと現行HTMLでは実現不可能なので構造を変えます。
(JavaScript 無効では「全てチェック／解除」が不要なコンテンツとして残るのでJavaScriptで「全てチェック／解除」を生成するようにしました。)

input[type=checkbox] を全てチェックする - JSFiddle

html
1<style>
2#sample input {
3  display: none;
4}
5#sample li {
6  margin: 0.8em;
7}
8#sample input:checked + label {
9  color: black;
10  background-color: #fcc;
11  border: solid 1px #f55;
12}
13</style>
14<script>
15'use strict';
16document.addEventListener('DOMContentLoaded', function (event) {
17  function handleChange (event) {
18    var input = event.target,
19        checked = input.checked;
20
21    if (input.tagName !== 'INPUT') {
22      return;
23    }
24
25    if (input.id === 'allcheck') {
26      for (var i = 0, genre = input.form.elements['genre[]'], l = genre.length; i < l; ++i) {
27        genre[i].checked = checked;
28      }
29    } else if (input.name === 'genre[]') {
30      input.form.elements['allcheck'].checked = checked;
31    }
32  }
33
34  function main () {
35    var ul = event.target.getElementById('sample'),
36        li = ul.firstElementChild.cloneNode(true),
37        input = li.firstElementChild,
38        label = li.lastElementChild;
39
40    input.id = 'allcheck';
41    input.name = 'allcheck';
42    input.value = 0;
43
44    label.htmlFor = 'allcheck';
45    label.firstChild.data = '全てチェック／解除';
46
47    ul.insertBefore(li, ul.firstElementChild);
48    ul.addEventListener('change', handleChange, false);
49  }
50
51  main();
52}, false);
53</script>
54</head>
55<body>
56<form>
57  <ul id="sample">
58    <li>
59      <input id="genre1" type="checkbox" name="genre[]" value="1" />
60      <label for="genre1">ジャンル1</label>
61    </li>
62    <li>
63      <input id="genre2" type="checkbox" name="genre[]" value="2" />
64      <label for="genre2">ジャンル2</label>
65    </li>
66    <li>
67      <input id="genre3" type="checkbox" name="genre[]" value="3" />
68      <label for="genre3">ジャンル3</label>
69    </li>
70    <li>
71      <input id="genre4" type="checkbox" name="genre[]" value="4" />
72      <label for="genre4">ジャンル4</label>
73    </li>
74    <li>
75      <input id="genre5" type="checkbox" name="genre[]" value="5" />
76      <label for="genre5">ジャンル5</label>
77    </li>
78  </ul>
79</form>

(更新履歴)

2016/03/16 17:11 changeイベントに変更。個別チェック時に一括チェックと連動するように修正。
2016/03/16 18:00 個別チェック時の処理の解釈が誤っていたのを修正

Re: ao_love さん

投稿2016/03/16 07:11

編集2016/03/16 09:00

think49

総合スコア18189

ao_love

2016/03/16 10:08

ありがとうございます！何度も修正までしていただいて本当にありがとうございます。希望通りの動きが実現できました！

行動規範の内容に同意します

簡潔にとはいえないですが下記のような形でどうでしょうか？
※組み方を少し変えてしまったので、変更が不可能な状況下でしたら申し訳ございません。

JavaScript
1$(function(){
2	$('#checkAll').on('change', function() {
3		$('#checkboxArea').children().children().children().prop('checked', this.checked);
4	});
5});

html
1<label><input type="checkbox" id="checkAll" value="0">全てチェック／解除</label>
2<ul id="checkboxArea">
3<li><label><input type="checkbox" value="1">ジャンル1</label></li>
4<li><label><input type="checkbox" value="2">ジャンル2</label></li>
5<li><label><input type="checkbox" value="3">ジャンル3</label></li>
6<li><label><input type="checkbox" value="4">ジャンル4</label></li>
7<li><label><input type="checkbox" value="5">ジャンル5</label></li>
8</ul>

ちなみにinput[type="checkbox"]自体をdisplay:none;にしてしまうとIE9未満のブラウザでlabelクリックしても何もおきない問題があるので、
IE8等も対応の必要がある場合は、opacity:0;にしておいた方が個人的にはお勧めですね。
※IE8の時だけcssの書き方変えるか、別途classつける必要はありますが。

投稿2016/03/16 07:45

編集2016/03/16 07:47

webnohito

総合スコア88

think49

2016/03/16 08:12 編集

IE8 は opacity を使えたでしょうか。私の認識違いなら申し訳ありませんが、IE8 は filter を使用する必要があると思っていました。 https://developer.mozilla.org/ja/docs/Web/CSS/opacity#ブラウザ実装状況 http://caniuse.com/#search=opacity

webnohito

2016/03/16 08:09

Re: hink49 さん説明不足ですね　申し訳ありません。おっしゃる通りでIE8の時は厳密にはfilterが必要ですね。割愛しすぎでした。 ※実質jsの方も書き換えてclass付与するのが下手にcssハック使ってデフォルトのチェックボックス出すよりはらくだと思うので、IE8対応が必要な場合は記載したjsだけでも不足してる状態となのは認識しております。 Re: ao_love さん IE8の対応も必要であれば記述を書き換えるので、記載いただければと思います。

think49

2016/03/16 08:25

To: ao_love さん参考までに IE8 は MS のサポート対象外の為、特別な理由がない限りはサポートしない事を推奨します。 (私の回答も IE8- は考慮していません。必要であれば修正しますが、ユーザビリティも考慮するといろいろと手を入れる部分がありそうですね…。) 特別な理由があったとして、opacity, filter で透過してもinput要素の描画領域はとられるので position: absolute; でlabel要素の配置に影響しないようにしたり、z-index で背面に持っていく等の工夫が必要だと思います。

行動規範の内容に同意します

一応これであれば動いているのではないかと。。。。
確認用にチェックボックスにIDつけてます。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>テスト</title>
6<style>
7input[type=checkbox] {
8    display: none;
9}
10
11</style>
12<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
13<script>
14$(function(){
15	$("#allcheck").click(function(){
16		if($("#allcheck").prop('checked')){
17			alert("a");
18			$(".onecheck").attr('checked','');
19		}else{
20			alert("b");
21			$(".onecheck").removeAttr('checked');
22		}
23		alert($("#c1").prop('checked'));
24		alert($("#c2").prop('checked'));
25		alert($("#c3").prop('checked'));
26		alert($("#c4").prop('checked'));
27		alert($("#c5").prop('checked'));
28	});
29});
30
31
32</script>
33</head>
34<body>
35<ul>
36<li><label><input type="checkbox" value="" id="allcheck" >全てチェック／解除</label></li>
37<li><label><input type="checkbox" class="onecheck" name="genre[]" value="1" onclick="oneCheck();" id="c1" />ジャンル1</label></li>
38<li><label><input type="checkbox" class="onecheck" name="genre[]" value="2" onclick="oneCheck();" id="c2"  />ジャンル2</label></li>
39<li><label><input type="checkbox" class="onecheck" name="genre[]" value="3" onclick="oneCheck();" id="c3"  />ジャンル3</label></li>
40<li><label><input type="checkbox" class="onecheck" name="genre[]" value="4" onclick="oneCheck();" id="c4"  />ジャンル4</label></li>
41<li><label><input type="checkbox" class="onecheck" name="genre[]" value="5" onclick="oneCheck();" id="c5"  />ジャンル5</label></li>
42</ul>
43</body>
44</html>

投稿2016/03/16 09:12

T.Yokotani

総合スコア141

本来のチェックボックスを非表示にして、代わりに、たとえばアイコン画像のようなもの？を表示しているということでしょうか？

一括チェックができない、ということのようですが、通常のひとつひとつポチポチするチェックは出来るのでしょうか。
（クリックイベントでチェックON 用の画像に切り替えたりしている？？？）

もしそれができているのであれば、その「クリック時に呼ばれる処理」を
ループか何かで全チェックボックス分呼んであげれば良いような気がしますが。

投稿2016/03/16 06:26

sk_3122

総合スコア1126

チェックボックスの一括選択・解除とCSSによる装飾の共存ができないということはないはずです。
htmlとjavascriptを次のようにしてみてはいかがでしょう。

html
1<li><label><input type="checkbox" value="" id="allcheck">全てチェック／解除</label></li>
2<li><label><input type="checkbox" class="onecheck" name="genre[]" value="1"/>ジャンル1</label></li>
3<li><label><input type="checkbox" class="onecheck" name="genre[]" value="2"/>ジャンル2</label></li>
4<li><label><input type="checkbox" class="onecheck" name="genre[]" value="3"/>ジャンル3</label></li>
5<li><label><input type="checkbox" class="onecheck" name="genre[]" value="4"/>ジャンル4</label></li>
6<li><label><input type="checkbox" class="onecheck" name="genre[]" value="5"/>ジャンル5</label></li>

javascript
1$(function(){
2    //全選択チェックボックス用処理
3    $("#allcheck").on("change", function(e){
4        if($(this).prop("checked")){
5            $(".onecheck").prop("checked", true);
6        } else {
7            $(".onecheck").prop("checked", false);
8        }
9    });
10
11    //個別選択チェックボックス用処理
12    $(".onecheck").on("change", function(e){
13        $(".onecheck").each(function(index, element){
14            if(!$(element).prop("checked")){
15                $("#allcheck").prop("checked", false);
16                return false;
17            }
18            $("#allcheck").prop("checked", true);
19        });
20    });
21});

すみませんが、私が書きやすい書き方で書かせていただきました。
解説が必要ならコメントください。

投稿2016/03/16 06:17

編集2016/03/16 08:20

orange0190

総合スコア1698

orange0190

2016/03/16 06:19 編集

あ、すみません。補足のところを見てませんでした。すべてのチェックボックスが見えないのなら、どうやってイベントを発火するんですか?

think49

2016/03/16 07:14 編集

> すべてのチェックボックスが見えないのなら、どうやってイベントを発火するんですか? input[type=checkbox] が存在しなくとも対応するlabel要素がクリックされればチェックされます。

orange0190

2016/03/16 07:19

>think49さんすみません。labelタグを見逃していました。 labelをクリックでチェックボックスにチェックを付けられることは知っていました。

orange0190

2016/03/16 07:25 編集

>think49さん質問投稿者ではないのに質問してしまい申し訳ありませんが、私の回答では無理なのでしょうか?

think49

2016/03/16 07:44

> $(".onecheck")on("change", function(e){ SyntaxError ですね。 https://jsfiddle.net/mn55hgpp/1/ 修正するとこうなります。 https://jsfiddle.net/mn55hgpp/2/ 「全てチェック／解除」は期待通りに機能しますが、「個別選択チェックボックス用処理」が何のためにあるのかわからない、というのが正直な感想です(なくても個別にチェックされません？)。なので私の回答では個別処理は何も書いていません。最後に質問の趣旨は「checkboxを不可視にした状態でチェックされた事を明示するUIを構築したい」と認識していますが、checkboxを消すとチェックされた事がわかりません(これが最大の問題だと思います)。 https://jsfiddle.net/mn55hgpp/3/ この構造を維持した状態でチェックされた事を明示するにはJavaScriptでclassを付け外しする処理が必要だと思いますが、「CSS有効/JS無効」の環境で有効に機能しない問題があります。なので、私は :checked はCSSで完結するように書きました(CSS有効/JS無効でも期待通りに動作するはずです)。 label>inputの構造を維持したままCSSで完結するスマートな方法があればいいとは思うのですが、私の知識では解決できませんでした。

orange0190

2016/03/16 07:52

ああ、「.」が抜けていたことに気が付きませんでした。指摘ありがとうございます。 >「個別選択チェックボックス用処理」が何のためにあるのかわからない個別チェック用の処理は単純に個別にチェックがされた場合にも、「全てチェック／解除」のチェックをon/offしたいというものかと思います。 >abel>inputの構造を維持したままCSSで完結するスマートな方法これはもしかしてCSS4を使えば、可能かな? ただ言ってみただけなので、まったく可能かどうかは考慮していませんが。

think49

2016/03/16 08:14

> 個別チェック用の処理は単純に個別にチェックがされた場合にも、「全てチェック／解除」のチェックをon/offしたいというものかと思います。なるほど、そこは気が付いてなかったので回答に反映させました。ありがとうございます。 https://jsfiddle.net/kw3uaqv4/2/ > これはもしかしてCSS4を使えば、可能かな? :has() の事ですよね。以前、試したときにはサポートブラウザがなかったので諦めていましたが、:has() を使えれば、CSS の幅が広がるので期待しています。 http://www.hcn.zaq.ne.jp/___/WEB/selectors4-ja.html#relational

orange0190

2016/03/16 08:50

>think49さんあらさがしをしているようで申し訳ないんですが、https://jsfiddle.net/kw3uaqv4/2/で示されているコードで個別チェックの処理が私の認識している動作と違うようです。個別チェックの処理は、個別すべてがチェックされたときに「全てチェック／解除」のチェックをonにして、1つでもチェックがされていなかったら、「全てチェック／解除」のチェックをoffにするようなものだと思っています。

think49

2016/03/16 09:02

ご指摘ありがとうございます。修正しました。あらさがしとは思っていませんし、指摘は有難いと思っていますので気になさらないで下さい。

行動規範の内容に同意します

あなたの回答