-2

CSSスプライトを使用したチェックボックスのリストがあります。チェックボックスは問題ありませんが、ユーザーがすべてのチェックボックスをオンにしたときに (そしてそのときだけ) ページの下部にボタンが表示されるようにしたいと思います。

どんな助けでも大歓迎です。

私はjfiddleを持っていますが、全体を取得できません-コードを添付する必要がありますか?

タイ

4

2 に答える 2

1

理論的には、これは、兄弟セレクター:checkedと組み合わせてセレクターを使用することにより、css のみで実行できます。+css は次のようになります。

.checkbox:checked + label + .checkbox:checked + label + .checkbox:checked + label + .checkbox:checked + label + .checkbox:checked + label + #the-button {
    display: block;
}

理論的にはこれでうまくいくはずですが、jsFiddle で試してみると、少しおかしな動作をしました。とにかく、これは非常に実行可能なソリューションではないと思います。デバッグが難しく、html に変更できない特定の構造が必要なためです。

実際には、これは数行の jQuery で実行できます。私が思いついたコードは次のようになります。

// cache he collection of checkboxes
var $checkboxes = $('#js-solution .checkbox');
// when a checkbox changes
$checkboxes.change(function() {
    // filter out the ones that are checked
    var $checked = $checkboxes.filter(':checked');
    // if the number of checked ones is 5
    if ($checked.length == 5) {
        // show the button
       $('#the-js-button').css('display', 'block');
    // if the number of checked ones is not 5
    } else {
        // hide the button
        $('#the-js-button').css('display', 'none');
    }
});

コメントは、何が起こっているのかを理解するのに十分なはずですが、遠慮なく質問してください。

私はこのフィドルで両方のソリューションを隣り合わせに置きました: http://jsfiddle.net/7GN7q/1/
css ソリューションは私にとってはうまくいきませんが、それは Chrome のものだと思います。スタイルを検査している間に無効になり、display:blockインスペクターでチェックを外してチェックすると機能します。とにかく、実際にはjsソリューションを使用します。

于 2013-06-02T14:58:53.247 に答える