當複選框無效時，更改背景顏色並隱藏特定div中的單選按鈕

-1

這是我的代碼的JSFIDDLE。當複選框無效時，更改背景顏色並隱藏特定div中的單選按鈕

在這裏，當複選框未選中時，我需要將背景顏色變成白色並隱藏單選按鈕。當檢查

同時我想說明的背景顏色作爲當前一個並顯示單選按鈕

<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>

來源

2013-07-29 Murshid Ahmed

而且我的解決方案（fiddle）：

HTML：

<div class="newsletter-box unchecked"> 
    ... 
</div>

JS：

$('#bonus-credit-checkbox').on('change', function() { 
    $('.newsletter-box').toggleClass('unchecked', !$(this).prop('checked')); 
});

CSS：

來源

2013-07-29 09:58:43

+1，很好的回答 – Sergio

@Bastian感謝您的編輯。 –

這不正是你想做的事：http://jsfiddle.net/aMyLb/5/

$(function(){ 
$("#bonus-credit-checkbox").change(function(){ 
    if($(this).is(":checked")){ 
     $(".gender-radio").hide(); 
     $(".newsletter-box").css("background-color", "#fff"); 
    } 
    else{ 
     $(".gender-radio").show(); 
     $(".newsletter-box").css("background-color", "#f6f2ef"); 
    } 
}); 
});

來源

2013-07-29 09:44:35

請參閱此解決方案。 WORKING DEMO

這是工作。默認情況下，您需要將主div的背景設爲白色。你也必須使單選按鈕div「display：none;」。

JQUERY

$(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-29 09:50:29 AnaMaria

視覺效果應該用css來完成，而不是用jquery使用css（）！只需在js代碼中設置類別 –

您可能是對的。但是OP有一個標籤「jquery」，因此JQuery解決方案就支持了。 – 2013-07-29 10:11:13

@BastianRang，你能夠友好地告訴我你引用這條規則的哪篇文章或引用？ – AnaMaria

只爲所有使用jQuery的人......在這裏談到的只是CSS的解決方案：

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

僅適用於現代的瀏覽器，不符合你的背景色的要求你必須改變你的HTML一點，如this fiddle - 這不是一個真正的答案你的問題，只是一個概念證明。 :-)

來源

2013-07-29 15:08:34

請注意，即使它並非100％正確，我也沒有倒下你的答案。它被稱爲寬容 – AnaMaria

當複選框無效時，更改背景顏色並隱藏特定div中的單選按鈕

回答

相關問題