質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    20439questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11521questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8168questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS3

    2630questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

解決済

回答 5

投稿

  • 評価
  • クリップ 1
  • VIEW 5,707

ao_love

score 420

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

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

<li><label><input type="checkbox" value="" id="allcheck" onclick="allCheck();">全てチェック/解除</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="1" onclick="oneCheck();" />ジャンル1</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="2" onclick="oneCheck();" />ジャンル2</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="3" onclick="oneCheck();" />ジャンル3</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="4" onclick="oneCheck();" />ジャンル4</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="5" onclick="oneCheck();" />ジャンル5</label></li>
<script type="text/javascript">
//全選択チェックボックス用処理
function allCheck() {
    if ($("#allcheck").is(":checked")) {
        $(".onecheck").attr("checked", true);
    } else {
        $(".onecheck").attr("checked", false);
    }
}

//個別選択チェックボックス用処理
function oneCheck() {
    var count = $(".onecheck").length;

    for (var i=0; i<count; i++) {
        if (!$(".onecheck").eq(i).is(":checked")) {
            $("#allcheck").attr("checked", false);
            return;
        }
    }
    $("#allcheck").attr("checked", true);
}
</script>

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

input[type=checkbox] {
    display: none;
}


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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • T.Yokotani

    2016/03/16 15:52

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

    キャンセル

  • think49

    2016/03/16 16:51

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

    キャンセル

  • T.Yokotani

    2016/03/16 17:40

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

    キャンセル

回答 5

checkベストアンサー

+2

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

<style>
#sample input {
  display: none;
}
#sample li {
  margin: 0.8em;
}
#sample input:checked + label {
  color: black;
  background-color: #fcc;
  border: solid 1px #f55;
}
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function (event) {
  function handleChange (event) {
    var input = event.target,
        checked = input.checked;

    if (input.tagName !== 'INPUT') {
      return;
    }

    if (input.id === 'allcheck') {
      for (var i = 0, genre = input.form.elements['genre[]'], l = genre.length; i < l; ++i) {
        genre[i].checked = checked;
      }
    } else if (input.name === 'genre[]') {
      input.form.elements['allcheck'].checked = checked;
    }
  }

  function main () {
    var ul = event.target.getElementById('sample'),
        li = ul.firstElementChild.cloneNode(true),
        input = li.firstElementChild,
        label = li.lastElementChild;

    input.id = 'allcheck';
    input.name = 'allcheck';
    input.value = 0;

    label.htmlFor = 'allcheck';
    label.firstChild.data = '全てチェック/解除';

    ul.insertBefore(li, ul.firstElementChild);
    ul.addEventListener('change', handleChange, false);
  }

  main();
}, false);
</script>
</head>
<body>
<form>
  <ul id="sample">
    <li>
      <input id="genre1" type="checkbox" name="genre[]" value="1" />
      <label for="genre1">ジャンル1</label>
    </li>
    <li>
      <input id="genre2" type="checkbox" name="genre[]" value="2" />
      <label for="genre2">ジャンル2</label>
    </li>
    <li>
      <input id="genre3" type="checkbox" name="genre[]" value="3" />
      <label for="genre3">ジャンル3</label>
    </li>
    <li>
      <input id="genre4" type="checkbox" name="genre[]" value="4" />
      <label for="genre4">ジャンル4</label>
    </li>
    <li>
      <input id="genre5" type="checkbox" name="genre[]" value="5" />
      <label for="genre5">ジャンル5</label>
    </li>
  </ul>
</form>

(更新履歴)

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

Re: ao_love さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/16 19:08

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

    キャンセル

+1

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

$(function(){
    $('#checkAll').on('change', function() {
        $('#checkboxArea').children().children().children().prop('checked', this.checked);
    });
});
<label><input type="checkbox" id="checkAll" value="0">全てチェック/解除</label>
<ul id="checkboxArea">
<li><label><input type="checkbox" value="1">ジャンル1</label></li>
<li><label><input type="checkbox" value="2">ジャンル2</label></li>
<li><label><input type="checkbox" value="3">ジャンル3</label></li>
<li><label><input type="checkbox" value="4">ジャンル4</label></li>
<li><label><input type="checkbox" value="5">ジャンル5</label></li>
</ul>

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/16 16:56 編集

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

    キャンセル

  • 2016/03/16 17:09

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

    Re: ao_love さん
    IE8の対応も必要であれば記述を書き換えるので、記載いただければと思います。

    キャンセル

  • 2016/03/16 17:25

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

    キャンセル

0

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

<li><label><input type="checkbox" value="" id="allcheck">全てチェック/解除</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="1"/>ジャンル1</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="2"/>ジャンル2</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="3"/>ジャンル3</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="4"/>ジャンル4</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="5"/>ジャンル5</label></li>
$(function(){
    //全選択チェックボックス用処理
    $("#allcheck").on("change", function(e){
        if($(this).prop("checked")){
            $(".onecheck").prop("checked", true);
        } else {
            $(".onecheck").prop("checked", false);
        }
    });

    //個別選択チェックボックス用処理
    $(".onecheck").on("change", function(e){
        $(".onecheck").each(function(index, element){
            if(!$(element).prop("checked")){
                $("#allcheck").prop("checked", false);
                return false;
            }
            $("#allcheck").prop("checked", true);
        });
    });
});


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/16 15:18 編集

    あ、すみません。
    補足のところを見てませんでした。

    すべてのチェックボックスが見えないのなら、どうやってイベントを発火するんですか?

    キャンセル

  • 2016/03/16 16:13 編集

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

    キャンセル

  • 2016/03/16 16:19

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

    キャンセル

  • 2016/03/16 16:24 編集

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

    キャンセル

  • 2016/03/16 16: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で完結するスマートな方法があればいいとは思うのですが、私の知識では解決できませんでした。

    キャンセル

  • 2016/03/16 16:52

    ああ、「.」が抜けていたことに気が付きませんでした。
    指摘ありがとうございます。

    >「個別選択チェックボックス用処理」が何のためにあるのかわからない
    個別チェック用の処理は単純に個別にチェックがされた場合にも、「全てチェック/解除」のチェックをon/offしたいというものかと思います。

    >abel>inputの構造を維持したままCSSで完結するスマートな方法
    これはもしかしてCSS4を使えば、可能かな?
    ただ言ってみただけなので、まったく可能かどうかは考慮していませんが。

    キャンセル

  • 2016/03/16 17:14

    > 個別チェック用の処理は単純に個別にチェックがされた場合にも、「全てチェック/解除」のチェックをon/offしたいというものかと思います。
    なるほど、そこは気が付いてなかったので回答に反映させました。ありがとうございます。
    https://jsfiddle.net/kw3uaqv4/2/

    > これはもしかしてCSS4を使えば、可能かな?
    :has() の事ですよね。
    以前、試したときにはサポートブラウザがなかったので諦めていましたが、:has() を使えれば、CSS の幅が広がるので期待しています。
    http://www.hcn.zaq.ne.jp/___/WEB/selectors4-ja.html#relational

    キャンセル

  • 2016/03/16 17:50

    >think49さん
    あらさがしをしているようで申し訳ないんですが、https://jsfiddle.net/kw3uaqv4/2/で示されているコードで個別チェックの処理が私の認識している動作と違うようです。

    個別チェックの処理は、個別すべてがチェックされたときに「全てチェック/解除」のチェックをonにして、1つでもチェックがされていなかったら、「全てチェック/解除」のチェックをoffにするようなものだと思っています。

    キャンセル

  • 2016/03/16 18:02

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

    キャンセル

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テスト</title>
<style>
input[type=checkbox] {
    display: none;
}

</style>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
$(function(){
    $("#allcheck").click(function(){
        if($("#allcheck").prop('checked')){
            alert("a");
            $(".onecheck").attr('checked','');
        }else{
            alert("b");
            $(".onecheck").removeAttr('checked');
        }
        alert($("#c1").prop('checked'));
        alert($("#c2").prop('checked'));
        alert($("#c3").prop('checked'));
        alert($("#c4").prop('checked'));
        alert($("#c5").prop('checked'));
    });
});


</script>
</head>
<body>
<ul>
<li><label><input type="checkbox" value="" id="allcheck" >全てチェック/解除</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="1" onclick="oneCheck();" id="c1" />ジャンル1</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="2" onclick="oneCheck();" id="c2"  />ジャンル2</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="3" onclick="oneCheck();" id="c3"  />ジャンル3</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="4" onclick="oneCheck();" id="c4"  />ジャンル4</label></li>
<li><label><input type="checkbox" class="onecheck" name="genre[]" value="5" onclick="oneCheck();" id="c5"  />ジャンル5</label></li>
</ul>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    20439questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11521questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8168questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS3

    2630questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。