javascript - 根据其他输入字段有条件地显示/隐藏未嵌套的标签/输入表单字段

很抱歉，您在原始帖子中不清楚的地方。

我试图在未选中底部复选框的情况下同时隐藏顶部两个表单域区域，并且在隐藏时不传递任何值。这是wordpress的注册表单，我不想修改html，这将使它变得更容易，因为我可以在divs中隐藏标签和输入。

此处显示的ID：

（顶部复选框）
ws-plugin--s2member-custom-reg-field-newsletters
（中间电台）
ws-plugin--s2member-custom-reg-field-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>

最佳答案

为了隐藏两个额外的表单部分，您将需要使用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，但是从UI的角度来看，底部的复选框将其上方的复选框隐藏起来是没有意义的。用户从左到右，从上到下阅读并且使底部的复选框与其上方的元素交互，这条通用规则被打破了。

您应该考虑将触发复选框移到顶部。

关于javascript - 根据其他输入字段有条件地显示/隐藏未嵌套的标签/输入表单字段，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32972684/