將一個：checked僞類添加到嵌入的mailchimp表格中

Question

首先，我不是一個真正的Web開發人員，所以請耐心等待。

我試圖在我的網站上嵌入mailchimp註冊表單。除非選擇了某個單選按鈕，否則我想設置一個複選框來保持隱藏狀態。

<!-- Begin MailChimp Signup Form --> 
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"> 
<style type="text/css"> 

.reveal{ 
    display: none !important; 
} 

#radio-2:checked ~ .reveal { 
    display: inline; 
} 

</style> 
<div id="mc_embed_signup"> 
<form action="n/a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
    <div id="mc_embed_signup_scroll"> 

<div class="mc-field-group input-group"> 
    <strong>Radio Buttons</strong> 
    <ul> 

<li><input type="radio" id="radio-1" value="Radio 1" name="MMERGE6" id="mce-MMERGE6-0"><label for="mce-MMERGE6-0">Radio 1</label></li> 

<li><input type="radio" id="radio-2" value="Part Time" name="MMERGE6" id="mce-MMERGE6-1"><label for="mce-MMERGE6-1">Part Time</label></li> 

</ul> 
</div> 
<div class="mc-field-group input-group reveal"> 
    <ul> 

<li><input type="checkbox" value="1" name="group[18657][1]" id="mce-group[18657]-18657-0"><label for="mce-group[18657]-18657-0">1</label></li> 

<li><input type="checkbox" value="2" name="group[18657][2]" id="mce-group[18657]-18657-1"><label for="mce-group[18657]-18657-1">2</label></li> 

<li><input type="checkbox" value="4" name="group[18657][4]" id="mce-group[18657]-18657-2"><label for="mce-group[18657]-18657-2">3</label></li> 

<li><input type="checkbox" value="8" name="group[18657][8]" id="mce-group[18657]-18657-3"><label for="mce-group[18657]-18657-3">4</label></li> 

</ul> 

</div> 
    <div id="mce-responses" class="clear"> 
     <div class="response" id="mce-error-response" style="display:none"></div> 
     <div class="response" id="mce-success-response" style="display:none"></div> 
    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e7f52c90ee3d55370f2c41bac_8ea8200d35" tabindex="-1" value=""></div> 
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
    </div> 
</form> 
</div> 
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[6]='MMERGE6';ftypes[6]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script> 
<!--End mc_embed_signup--> 

我想在這裏設置複選框只顯示何時第二個單選按鈕被選中。

我可以得到：當我寫我自己的表單時檢查工作，但我似乎無法讓它在嵌入式mailchimp表單中工作，我無法弄清楚爲什麼。有沒有人有任何想法？

Answer 1

這裏有幾個問題：

1. 與!important規則的樣式不能與其他的風格，不包括!important覆蓋。您可以將其從第一種樣式中移除以解決此問題。

2. ~兄弟CSS選擇器定位元素with the same parent。由於廣播和.reveal元素不共享相同的父元素，因此它不會顯示.reveal元素。

3. 單選按鈕不應該有兩個id屬性。當存在多個時，僅設置第二個id。

爲了讓兄弟選擇工作，你可以從單選按鈕刪除<ul>和<li>元素，和他們之前添加換行符所以他們仍然在不同的行。還把.reveal類<div>裏面的第一個.mc-field-group一個。這將使單選按鈕具有與隱藏元素相同的父項。

下面是更新後的代碼是什麼樣子：

<!-- Begin MailChimp Signup Form --> 
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"> 
<style type="text/css"> 

.reveal { 
    display: none; 
} 

#mce-MMERGE6-1:checked ~ .reveal { 
    display: inline; 
} 

</style> 
<div id="mc_embed_signup"> 
    <form action="n/a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
     <div id="mc_embed_signup_scroll"> 
      <div class="mc-field-group input-group"> 
       <strong>Radio Buttons</strong> 
       <br> 
       <input type="radio" value="Radio 1" name="MMERGE6" id="mce-MMERGE6-0"><label for="mce-MMERGE6-0">Radio 1</label> 
       <br> 
       <input type="radio" value="Part Time" name="MMERGE6" id="mce-MMERGE6-1"><label for="mce-MMERGE6-1">Part Time</label> 
       <div class="reveal"> 
        <ul> 
         <li><input type="checkbox" value="1" name="group[18657][1]" id="mce-group[18657]-18657-0"><label for="mce-group[18657]-18657-0">1</label></li> 
         <li><input type="checkbox" value="2" name="group[18657][2]" id="mce-group[18657]-18657-1"><label for="mce-group[18657]-18657-1">2</label></li> 
         <li><input type="checkbox" value="4" name="group[18657][4]" id="mce-group[18657]-18657-2"><label for="mce-group[18657]-18657-2">3</label></li> 
         <li><input type="checkbox" value="8" name="group[18657][8]" id="mce-group[18657]-18657-3"><label for="mce-group[18657]-18657-3">4</label></li> 
        </ul> 
       </div> 
      </div> 
      <div id="mce-responses" class="clear"> 
       <div class="response" id="mce-error-response" style="display:none"></div> 
       <div class="response" id="mce-success-response" style="display:none"></div> 
      </div> 
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e7f52c90ee3d55370f2c41bac_8ea8200d35" tabindex="-1" value=""></div> 
      <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
     </div> 
    </form> 
</div> 
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[4]='MMERGE4';ftypes[4]='phone';fnames[6]='MMERGE6';ftypes[6]='radio';}(jQuery));var $mcj = jQuery.noConflict(true);</script> 
<!--End mc_embed_signup-->