javascript - 特定の DIV コンテンツに基づいて CSS を変更する

Question

誰かがjqueryまたはjavascriptで私を助けてくれることを願っています. チェックボックスをオンにするかどうかに応じて、「1」または「0」のチェックボックスの値を含む DIV がいくつかあります。

<div class="checkbox">1</div>   //This is when the checkbox is checked

<div class="checkbox">0</div>   //This is when the checkbox is NOT checked

この DIV のクラスは、0 であっても 1 であっても同じままであるため、次のような条件ステートメントが必要です。

「DIV の内容が 1 の場合は表示する」

と

「DIV の内容が 0 の場合は非表示にする」

これを行うのは簡単でしょうか？

Answer 1

そんな時に役立つのがフィルターです。

$('.checkbox').filter(function () {
   return $(this).text() == 0;
}).hide();

Answer 2

私はそれを別の方法で行います。

$("input#checkbox").change(function(){
  $("div.checkbox").toggle(this.checked);
});

<div>あなたのチェックボックスがとにかくの内容を変更しているものであることを考慮してください。

Answer 3

もし私がそれをしなければならないなら、私はこの方法でやりたいと思っています: http://jsfiddle.net/P2WmG/

var chktxt = $.trim($('.checkbox').text());
if (chktxt == 0) {
   $('#checkbox').hide();
} else {
   $('#checkbox').show();
}

Answer 4

チェックボックスが変更されるたびに、クラスでdivを見て、checkbox1の場合は表示、そうでない場合は非表示にします。

$('input[type="checkbox"]').on('change', function() {
    $('.checkbox').each(function(){
        if($(this).text() === '1'){
            $(this).show();
        }else{
            $(this).hide();
        }
    });
});

Answer 5

:contains() セレクターを使用して、内容に基づいて div を選択できます。

$('div.checkbox:contains("1")').show();
$('div.checkbox:contains("0")').hide();