-1

これが私のコードへのJSFIDDLEです。

ここでは、チェック ボックスがオフになっている場合は、背景色を白にして、ラジオ ボタンを非表示にする必要があります。

一方、チェックされている場合、背景色を現在の色として表示し、ラジオボタンを表示したい

 <div class="newsletter-box">
     <span class="bonus-credit-wrapper">
         <input id="bonus-credit-checkbox" name="bonus-credit-checkbox" type="checkbox" value="" />
         <label for="bonus-credit-checkbox" class="bonus-credit-checkbox-label">Your bonus credits</label>

         <span class="bonus-credit-description">
             Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
         </span>
     </span>

     <span class="newsletter-preference">
         <span class="newsletter-preference-text">I prefer for:
         </span>

         <span class="gender-radio">
             <input checked id="newsletter-male" name="newsletter-gender" type="radio">
             <label for="newsletter-male">Women</label>
         </span>
         <span class="gender-radio">
             <input id="newsletter-female" name="newsletter-gender" type="radio">
             <label for="newsletter-female">Men</label>
         </span>

  </span>
4

4 に答える 4

1

jQuery を使用しているすべての人のために...ここに CSS のみのソリューションがあります。

#bonus-credit-checkbox:not(:checked) ~ .newsletter-preference{
    display:none;
}

最新のブラウザでのみ機能し、背景色の要件を満たしていないため、このフィドルに見られるようにhtmlを少し変更する必要があります-そのため、質問に対する本当の答えではなく、概念の証明にすぎません. :-)

于 2013-07-29T15:08:34.403 に答える
0

このソリューションをチェックしてください。 ワーキングデモ

これは機能しています。メイン div の背景をデフォルトで白にする必要があります。また、ラジオ ボタン div を " display:none; " にする必要があります。

Jクエリ

$(function(){
    $("#bonus-credit-checkbox").change(function(){
        if($(this).is(":checked")){  
            $('.newsletter-preference').hide();         
            $('div').css('background-color', '#fff'); 
        }
        else{
            $('.newsletter-preference').show();
            $('div').css('background-color', '#f6f2ef');
        }
    });
});
于 2013-07-29T09:50:29.333 に答える