根据其他输入字段有条件地显示/隐藏未标注的标签/输入表单字段
对不起,在原始文章中没有更清楚。根据其他输入字段有条件地显示/隐藏未标注的标签/输入表单字段
我试图隐藏顶部的两个表单字段区域,当底部的复选框未选中时,不传递任何值,当他们被隐藏。这是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>
<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>
<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>=> Yes, I wish to receive JETAAUK Newsletters via email <= </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>
<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>
<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>=> Yes, I wish to receive JETAAUK Newsletters via email <= </strong></span>
</label>
</p>
jQuery代码假定HTML不会改变。如果复选框的ID值发生变化,那么jQuery将会中断。
我知道你不想在这里改变HTML,但从用户界面的角度来看,底部的复选框隐藏了它的上面没有任何意义。用户从左到右,从上到下阅读,底部复选框与上面的元素进行交互,这个通用规则被破坏了。
您应该考虑将触发复选框移动到顶部。
LOVELY。我看到底部的声明也清楚隐藏字段的值! 是的,理想情况下,我想将隐藏的字段放在触发器输入下。然而,目前上面的代码是wordpress的s2member插件的注册/配置文件表单的一部分(它使用本地WP注册表单,并附加上面的代码,它是自定义字段(我想要隐藏的前两个)和底部的复选框(这是邮件列表的选择),所以顶部两个字段是完全独立于底部的,这实际上总是最后一个 –
我想重写注册模板并更改字段的顺序但到目前为止我还没有看到太多的文档,我不确定是否可以用CSS来做,或者如果我更直接的改变php文件。 –
我没有任何经验这个插件,但是当你在wp-admin中添加你的自定义字段时,你能不能以特定的顺序添加它们吗? – Ant
此代码是有点旧丑陋,但这是不改变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> <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> <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>=> Yes, I wish to receive JETAAUK Newsletters via email <= </strong></span></label></p>
谢谢@Mosh,collapseParent看起来不错。我改变了它,因为我想根据底部的复选框将顶部的两个框勾掉。你怎么能崩溃两个领域?你能否在同一个实例中调用collapseParent和多个节点? https://jsfiddle.net/8ACN9/3/ 下面是为了隐藏顶部字段而修改的代码: –
您可以根据需要在多个节点上执行此操作。像这样:https://jsfiddle.net/8ACN9/56/ –
感谢澄清。我有两个隐藏得很好,但我现在看到,上面没有清除输入值,它只是在视觉上隐藏它们。我将试图在下面使用@MrBearding的解决方案,因为它隐藏隐藏的字段上的值,有效地重置它们。 –
这是不是很清楚你想要隐藏/显示。你能否澄清你想达到的工作流程? – Ant
Thanks @MrBearding我已重申与本指南更接近 –