根據其他輸入字段有條件地顯示/隱藏未標註的標籤/輸入表單字段

Question

對不起，在原始文章中沒有更清楚。

我試圖隱藏頂部的兩個表單字段區域，當底部的複選框未選中時，不傳遞任何值，當他們被隱藏。這是wordpress的註冊表格，我不想修改html，這會使它更容易，因爲我可以接下divs中的標籤和輸入來隱藏。

這裏顯示的ID：

（頂部複選框） WS-插件 - s2member定製-REG-場通訊 （中間單選） WS-插件 - s2member定製-REG場-jobalerts （底部複選框ID） ws-plugin - s2member-custom-reg-field-opt-in

@Mosh建議以下是關閉，但只隱藏一個。

// Store the `p` node which contains the label. 
 
var collapseParent = $('label[for="ws-plugin--s2member-custom-reg-field-jobalerts"]').parent(); 
 

 
// Store the `checkbox` that we want to "listen" to 
 
var checkbox = $('[name="ws_plugin__s2member_custom_reg_field_opt_in"]'); 
 

 
// Attach the `change` event on the checkbox and trigger the event so it will fire on page load 
 
checkbox.change(toggle).trigger('change'); 
 

 
// show/hide the `p` node depeneds if the checbox was checked or not 
 
function toggle() { 
 
    collapseParent.toggle(checkbox.is(':checked')); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <label for="ws-plugin--s2member-custom-reg-field-newsletters"> 
 
<span style="display:none;">Do you wish to receive JETAAUK Newsletters? *</span> 
 

 
    </label> 
 
    <input type="checkbox" value="1" checked="checked" name="ws_plugin__s2member_custom_reg_field_newsletters" id="ws-plugin--s2member-custom-reg-field-newsletters" aria-required="true" tabindex="59" class="ws-plugin--s2member-custom-reg-field s2conditional1"> 
 
    <label for="ws-plugin--s2member-custom-reg-field-newsletters" style="display:inline !important; margin:0 !important;">Do you wish to receive JETAAUK Newsletters?</label> 
 
</p> 
 
<p> 
 
    <label for="ws-plugin--s2member-custom-reg-field-jobalerts"> 
 
<span>Do you wish to receive job alerts (digest)? *</span> 
 

 
    </label> 
 
    <br> 
 
    <input type="radio" value="weekly" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---0" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> 
 
    <label for="ws-plugin--s2member-custom-reg-field-jobalerts-0" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">weekly</label>&nbsp;&nbsp; 
 
    <input type="radio" value="daily" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---1" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> 
 
    <label for="ws-plugin--s2member-custom-reg-field-jobalerts-1" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">daily</label>&nbsp;&nbsp; 
 
    <input type="radio" value="none" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---2" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> 
 
    <label for="ws-plugin--s2member-custom-reg-field-jobalerts-2" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">none</label> 
 
</p> 
 
<p> 
 
    <label for="ws-plugin--s2member-custom-reg-field-opt-in"> 
 
     <input type="checkbox" name="ws_plugin__s2member_custom_reg_field_opt_in" id="ws-plugin--s2member-custom-reg-field-opt-in" class="ws-plugin--s2member-custom-reg-field" value="1" checked="not" tabindex="70"> 
 
<span style="color:#be0026;"><strong>=&gt; Yes, I wish to receive JETAAUK Newsletters via email &lt;= </strong></span> 
 

 
    </label> 
 
</p>

Answer 1

爲了隱藏這兩個額外的表單部分將需要使用JavaScript。我個人使用jQuery插件，從你對Mosh Feu的回答的評論中，這不會是一個問題。

代碼不是最佳的，但由於您無法更改HTML，我們將使用我們的產品。

// Store the checkbox we'll be monitoring for changes 
 
var checkTrigger = $('#ws-plugin--s2member-custom-reg-field-opt-in'); 
 

 
// Store the items we want to show/hide 
 
// I store the 'none' radio button here - if the HTML changes, this will break 
 
// we use this particular radio button further down 
 
var jobAlerts = $('#ws-plugin--s2member-custom-reg-field-jobalerts---2'); 
 
var newsletterCheck = $('#ws-plugin--s2member-custom-reg-field-newsletters'); 
 

 
// Check for the change of the checkbox 
 
checkTrigger.change(function() { 
 
    toggleForm(checkTrigger.is(':checked')); 
 
}); 
 

 
// Toggle the form 
 
function toggleForm(isChecked) { 
 
    jobAlerts.parent().toggle(isChecked); 
 
    newsletterCheck.parent().toggle(isChecked); 
 

 
    // We'll uncheck the red Newsletter checkbox too, if it's being hidden 
 
    // and we'll set the job alerts to none; 
 
    if (!isChecked) { 
 
    newsletterCheck.prop("checked", false); 
 
    jobAlerts.prop("checked", true); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <label for="ws-plugin--s2member-custom-reg-field-newsletters"> 
 
    <span style="display:none;">Do you wish to receive JETAAUK Newsletters? *</span> 
 

 
    </label> 
 
    <input type="checkbox" value="1" checked="checked" name="ws_plugin__s2member_custom_reg_field_newsletters" id="ws-plugin--s2member-custom-reg-field-newsletters" aria-required="true" tabindex="59" class="ws-plugin--s2member-custom-reg-field s2conditional1"> 
 
    <label for="ws-plugin--s2member-custom-reg-field-newsletters" style="display:inline !important; margin:0 !important;">Do you wish to receive JETAAUK Newsletters?</label> 
 
</p> 
 
<p> 
 
    <label for="ws-plugin--s2member-custom-reg-field-jobalerts"> 
 
    <span>Do you wish to receive job alerts (digest)? *</span> 
 

 
    </label> 
 
    <br> 
 
    <input type="radio" value="weekly" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---0" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> 
 
    <label for="ws-plugin--s2member-custom-reg-field-jobalerts-0" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">weekly</label>&nbsp;&nbsp; 
 
    <input type="radio" value="daily" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---1" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> 
 
    <label for="ws-plugin--s2member-custom-reg-field-jobalerts-1" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">daily</label>&nbsp;&nbsp; 
 
    <input type="radio" value="none" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---2" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> 
 
    <label for="ws-plugin--s2member-custom-reg-field-jobalerts-2" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">none</label> 
 
</p> 
 
<p> 
 
    <label for="ws-plugin--s2member-custom-reg-field-opt-in"> 
 
    <input type="checkbox" name="ws_plugin__s2member_custom_reg_field_opt_in" id="ws-plugin--s2member-custom-reg-field-opt-in" class="ws-plugin--s2member-custom-reg-field" value="1" checked="not" tabindex="70"> 
 
    <span style="color:#be0026;"><strong>=&gt; Yes, I wish to receive JETAAUK Newsletters via email &lt;= </strong></span> 
 

 
    </label> 
 
</p>

jQuery代碼假定HTML不會改變。如果複選框的ID值發生變化，那麼jQuery將會中斷。

我知道你不想在這裏改變HTML，但從用戶界面的角度來看，底部的複選框隱藏了它的上面沒有任何意義。用戶從左到右，從上到下閱讀，底部複選框與上面的元素進行交互，這個通用規則被破壞了。

您應該考慮將觸發複選框移動到頂部。

Answer 2

此代碼是有點舊醜陋，但這是不改變html的「成本」。

請仔細閱讀代碼中的說明，以便了解我所做的事情。

如果你想要做這個功能給其他複選框/單選按鈕，只需更改元素的選擇器（標籤/複選框或P節點）

// Store the `p` node which contains the label. 
 
var collapseParent = $('label[for="ws-plugin--s2member-custom-reg-field-jobalerts"]').parent(); 
 

 
// Store the `checkbox` that we want to "listen" to 
 
var checkbox = $('[name="ws_plugin__s2member_custom_reg_field_newsletters"]'); 
 

 
// Attach the `change` event on the checkbox and trigger the event so it will fire on page load 
 
checkbox.change(toggle).trigger('change'); 
 

 
// show/hide the `p` node depeneds if the checbox was checked or not 
 
function toggle() { 
 
    collapseParent.toggle(checkbox.is(':checked')); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
<label for="ws-plugin--s2member-custom-reg-field-newsletters"> 
 
<span style="display:none;">Do you wish to receive JETAAUK Newsletters? *</span></label> 
 
<input type="checkbox" value="1" checked="checked" name="ws_plugin__s2member_custom_reg_field_newsletters" id="ws-plugin--s2member-custom-reg-field-newsletters" aria-required="true" tabindex="59" class="ws-plugin--s2member-custom-reg-field s2conditional1"> <label for="ws-plugin--s2member-custom-reg-field-newsletters" style="display:inline !important; margin:0 !important;">Do you wish to receive JETAAUK Newsletters?</label></p> 
 
    
 
    <p> 
 
<label for="ws-plugin--s2member-custom-reg-field-jobalerts"> 
 
<span>Do you wish to receive job alerts (digest)? *</span></label><br> 
 
<input type="radio" value="weekly" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---0" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> <label for="ws-plugin--s2member-custom-reg-field-jobalerts-0" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">weekly</label>&nbsp;&nbsp;<input type="radio" value="daily" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---1" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> <label for="ws-plugin--s2member-custom-reg-field-jobalerts-1" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">daily</label>&nbsp;&nbsp;<input type="radio" value="none" name="ws_plugin__s2member_custom_reg_field_jobalerts" id="ws-plugin--s2member-custom-reg-field-jobalerts---2" aria-required="true" tabindex="60" class="ws-plugin--s2member-custom-reg-field s2conditional2" style="color:#006699;"> <label for="ws-plugin--s2member-custom-reg-field-jobalerts-2" class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;">none</label></p> 
 
    
 
    <p> 
 
<label for="ws-plugin--s2member-custom-reg-field-opt-in"> 
 
<input type="checkbox" name="ws_plugin__s2member_custom_reg_field_opt_in" id="ws-plugin--s2member-custom-reg-field-opt-in" class="ws-plugin--s2member-custom-reg-field" value="1" checked="not" tabindex="70"> 
 
<span style="color:#be0026;"><strong>=&gt; Yes, I wish to receive JETAAUK Newsletters via email &lt;= </strong></span></label></p>