Q&A
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の処理に必要なので変更ができません。
よろしくお願いいたします。
はい、間違いありません。チェックボックスすべてのデザインを上書きしているので、全チェックの項目もチェックボックスは見えていないです。
回答の方でも書かれている方がいらっしゃいますが、イベントの発生方法を記載いただけますと、返答しやすいかと思います。
label要素がクリックされれば対応するinput要素も発火します。
チェックボックスだけ隠している感じでしたね。
失礼いたしました。
回答5件
0
ベストアンサー
擬似クラス :checked を使いますが、Selectors API 4 の :has がないと現行HTMLでは実現不可能なので構造を変えます。
(JavaScript 無効では「全てチェック／解除」が不要なコンテンツとして残るのでJavaScriptで「全てチェック／解除」を生成するようにしました。)
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総合スコア18162
0
簡潔にとはいえないですが下記のような形でどうでしょうか？
※組み方を少し変えてしまったので、変更が不可能な状況下でしたら申し訳ございません。
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
総合スコア88
IE8 は opacity を使えたでしょうか。
私の認識違いなら申し訳ありませんが、IE8 は filter を使用する必要があると思っていました。
https://developer.mozilla.org/ja/docs/Web/CSS/opacity#ブラウザ実装状況
http://caniuse.com/#search=opacity
Re: hink49 さん
説明不足ですね 申し訳ありません。
おっしゃる通りでIE8の時は厳密にはfilterが必要ですね。割愛しすぎでした。
※実質jsの方も書き換えてclass付与するのが下手にcssハック使ってデフォルトのチェックボックス出すよりはらくだと思うので、IE8対応が必要な場合は記載したjsだけでも不足してる状態となのは認識しております。
Re: ao_love さん
IE8の対応も必要であれば記述を書き換えるので、記載いただければと思います。
To: ao_love さん
参考までに IE8 は MS のサポート対象外の為、特別な理由がない限りはサポートしない事を推奨します。
(私の回答も IE8- は考慮していません。必要であれば修正しますが、ユーザビリティも考慮するといろいろと手を入れる部分がありそうですね…。)
特別な理由があったとして、opacity, filter で透過してもinput要素の描画領域はとられるので position: absolute; でlabel要素の配置に影響しないようにしたり、z-index で背面に持っていく等の工夫が必要だと思います。
0
一応これであれば動いているのではないかと。。。。
確認用にチェックボックスに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
総合スコア141
0
本来のチェックボックスを非表示にして、代わりに、たとえばアイコン画像のようなもの？を表示しているということでしょうか？
一括チェックができない、ということのようですが、通常のひとつひとつポチポチするチェックは出来るのでしょうか。
（クリックイベントで チェックON 用の画像に切り替えたりしている？？？）
もしそれができているのであれば、その「クリック時に呼ばれる処理」を
ループか何かで全チェックボックス分 呼んであげれば良いような気がしますが。
投稿2016/03/16 06:26
総合スコア1126
0
チェックボックスの一括選択・解除と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
総合スコア1698
あ、すみません。
補足のところを見てませんでした。
すべてのチェックボックスが見えないのなら、どうやってイベントを発火するんですか?
> すべてのチェックボックスが見えないのなら、どうやってイベントを発火するんですか?
input[type=checkbox] が存在しなくとも対応するlabel要素がクリックされればチェックされます。
>think49さん
すみません。labelタグを見逃していました。
labelをクリックでチェックボックスにチェックを付けられることは知っていました。
>think49さん
質問投稿者ではないのに質問してしまい申し訳ありませんが、私の回答では無理なのでしょうか?
> $(".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で完結するスマートな方法があればいいとは思うのですが、私の知識では解決できませんでした。
ああ、「.」が抜けていたことに気が付きませんでした。
指摘ありがとうございます。
>「個別選択チェックボックス用処理」が何のためにあるのかわからない
個別チェック用の処理は単純に個別にチェックがされた場合にも、「全てチェック／解除」のチェックをon/offしたいというものかと思います。
>abel>inputの構造を維持したままCSSで完結するスマートな方法
これはもしかしてCSS4を使えば、可能かな?
ただ言ってみただけなので、まったく可能かどうかは考慮していませんが。
> 個別チェック用の処理は単純に個別にチェックがされた場合にも、「全てチェック／解除」のチェックをon/offしたいというものかと思います。
なるほど、そこは気が付いてなかったので回答に反映させました。ありがとうございます。
https://jsfiddle.net/kw3uaqv4/2/
> これはもしかしてCSS4を使えば、可能かな?
:has() の事ですよね。
以前、試したときにはサポートブラウザがなかったので諦めていましたが、:has() を使えれば、CSS の幅が広がるので期待しています。
http://www.hcn.zaq.ne.jp/___/WEB/selectors4-ja.html#relational
>think49さん
あらさがしをしているようで申し訳ないんですが、https://jsfiddle.net/kw3uaqv4/2/で示されているコードで個別チェックの処理が私の認識している動作と違うようです。
個別チェックの処理は、個別すべてがチェックされたときに「全てチェック／解除」のチェックをonにして、1つでもチェックがされていなかったら、「全てチェック／解除」のチェックをoffにするようなものだと思っています。
ご指摘ありがとうございます。修正しました。
あらさがしとは思っていませんし、指摘は有難いと思っていますので気になさらないで下さい。
あなたの回答
tips
プレビュー
