如果勾选复选框,隐藏/显示课程内容
似乎无法使复选框部分正常工作。如果勾选复选框,隐藏/显示课程内容
.hide()工作正常,但else拒绝再次显示它。
相同的代码弄乱脚本的其他位在页面上的其他版本,并且切换是一个没有去,由于加载时间(如果访问者点击太早它结束了逆转!)
从本质上讲,我要查找的所有内容都是在勾选复选框时隐藏内容,如果未勾选则再次显示内容。
jQuery(document).ready(function($) {
$('.sponsor_table').hide();
$('.sponsor_address').hide();
$('input[type="checkbox"]').click(function(){
if($('input[name="remain_anonymous"]:checked')) {
$('.sponsor_name').hide();
$('.sponsor_logo').hide();
$('.sponsor_website').hide();
} else {
$('.sponsor_name').show();
$('.sponsor_logo').show();
$('.sponsor_website').show();
}
});
$('input[type="radio"]').click(function(){
if($('input[name="cb_sponsor_attendance"]:checked').val() == "Yes"){
$('.sponsor_table').fadeIn('slow');
$('.sponsor_address').hide();
}
else if($('input[name="cb_sponsor_attendance"]:checked').val() == "No"){
$('.sponsor_address').fadeIn('slow');
$('.sponsor_table').hide();
}
});
});
的复选框节的完整的HTML是:
<div id="remain_anonymous-wrap" class="form-row anonymous_sponsor"> <label class="give-label" for="ffm-remain_anonymous">
Make this donation anonymous? <span class="give-tooltip give-icon give-icon-question"
data-tooltip="Details will not be shared on the site, or at the event"></span>
</label>
<span data-required="no" data-type="checkbox"></span>
<span class="ffm-fields">
<label>
<input type="checkbox" name="remain_anonymous[]"
value="Yes, please don't share my identity" />
Yes, please don't share my identity </label>
</span>
</div><div id="cb_sponsor_name-wrap" class="form-row sponsor_name"> <label class="give-label" for="ffm-cb_sponsor_name">
Your Name/Business Name <span class="give-tooltip give-icon give-icon-question"
data-tooltip="This will be shared both online and on the table at the gala."></span>
</label>
<input class="textfield"
id="ffm-cb_sponsor_name" type="text"
data-required="no"
data-type="text" name="cb_sponsor_name"
placeholder="" value=""
size=" 100" />
</div><div id="cb_sponsor_logo-wrap" class="form-row sponsor_logo"> <label class="give-label" for="ffm-cb_sponsor_logo">
Photo/Logo </label>
<div id="ffm-cb_sponsor_logo-upload-container">
<div class="ffm-attachment-upload-filelist">
<a id="ffm-cb_sponsor_logo-pickfiles" class="button file-selector"
href="#">Select File(s)</a>
<span class="ffm-file-validation" data-required="no" data-type="file"></span>
<ul class="ffm-attachment-list give-thumbnails">
</ul>
</div>
</div><!-- .container -->
<script type="text/javascript">
jQuery(function ($) {
new Give_FFM_Uploader('ffm-cb_sponsor_logo-pickfiles', 'ffm-cb_sponsor_logo-upload-container', 1, 'cb_sponsor_logo', 'jpg,jpeg,gif,png,bmp,', 2048);
});
</script>
</div><div id="cb_sponsor_website-wrap" class="form-row sponsor_website"> <label class="give-label" for="ffm-cb_sponsor_website">
Website </label>
<input id="ffm-cb_sponsor_website" type="url" class="give-url"
data-required="no" data-type="text" name="cb_sponsor_website"
placeholder="" value=""
size="100"/>
</div>
试试这个下面的代码,并检查:
$('input[type="checkbox"]').click(function() {
$('.sponsor_name,.sponsor_website,.sponsor_logo').show();
if ($(this).is(':checked')) {
$('.sponsor_name,.sponsor_website,.sponsor_logo').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="remain_anonymous-wrap" class="form-row anonymous_sponsor"> <label class="give-label" for="ffm-remain_anonymous">
Make this donation anonymous? <span class="give-tooltip give-icon give-icon-question"
data-tooltip="Details will not be shared on the site, or at the event"></span>
</label>
<span data-required="no" data-type="checkbox"></span>
<span class="ffm-fields">
<label>
<input type="checkbox" name="remain_anonymous[]"
value="Yes, please don't share my identity" />
Yes, please don't share my identity </label>
</span>
</div><div id="cb_sponsor_name-wrap" class="form-row sponsor_name"> <label class="give-label" for="ffm-cb_sponsor_name">
Your Name/Business Name <span class="give-tooltip give-icon give-icon-question"
data-tooltip="This will be shared both online and on the table at the gala."></span>
</label>
<input class="textfield"
id="ffm-cb_sponsor_name" type="text"
data-required="no"
data-type="text" name="cb_sponsor_name"
placeholder="" value=""
size=" 100" />
</div><div id="cb_sponsor_logo-wrap" class="form-row sponsor_logo"> <label class="give-label" for="ffm-cb_sponsor_logo">
Photo/Logo </label>
<div id="ffm-cb_sponsor_logo-upload-container">
<div class="ffm-attachment-upload-filelist">
<a id="ffm-cb_sponsor_logo-pickfiles" class="button file-selector"
href="#">Select File(s)</a>
<span class="ffm-file-validation" data-required="no" data-type="file"></span>
<ul class="ffm-attachment-list give-thumbnails">
</ul>
</div>
</div><!-- .container -->
</div><div id="cb_sponsor_website-wrap" class="form-row sponsor_website"> <label class="give-label" for="ffm-cb_sponsor_website">
Website </label>
<input id="ffm-cb_sponsor_website" type="url" class="give-url"
data-required="no" data-type="text" name="cb_sponsor_website"
placeholder="" value=""
size="100"/>
</div>
Nope :(现在不做任何事情,点击它没有任何效果 –
已更新。希望这会有所帮助 –
唉,该脚本已包含在页面中,并且正在处理其他元素。插件。我无法控制HTML输出,并且无法粘贴整个东西,因为它太长了......例如,Web地址是:[link](https://project365.site/support/sydney-2017-table -2 /) –
尝试使用此功能时,您复选框
$("input[name=anonymous_sponsor]").change(function() {
if(this.checked) {
$('.sponsor_name').hide();
$('.sponsor_logo').hide();
$('.sponsor_website').hide();
} else {
$('.sponsor_name').show();
$('.sponsor_logo').show();
$('.sponsor_website').show();
}
});
假设你有,你要听变革
$('input[name="your_input_field_name"]').change(function(){
if($(this).is(':checked')){
//if ture
}else{
//if false
}
});
都能跟得上:('\t \t \t \t \t \t $(' 输入[名称= “remain_anonymous”] ')改变(函数(){ \t \t \t \t \t \t \t如果($(本)。是(':检查 ')){ \t \t \t \t \t \t \t $(' SPONSOR_NAME ')隐藏(); \t \t \t \t \t $('。sponsor_logo')隐藏(); \t \t \t \t \t $('。sponsor_website')。hide(); \t \t \t \t \t \t \t}其他{ \t \t \t \t \t \t \t $( 'SPONSOR_NAME。')显示()。 \t \t \t \t \t $('。sponsor_logo')。show(); \t \t \t \t \t $('。sponsor_website')。show(); \t \t \t \t \t \t} \t \t \t \t \t \t});”什么都不做。 –
Bah!输入名称必须包括方括号!什么?!将它更改为remain_anonymous []似乎已经成功了! –
您已使用输入数组。是否有许多remaining_anonymous的实例?如果没有摆脱名称末尾的括号 – Lasithds
解决的名称“your_input_field_name” <input name="your_input_field_name" type="checkbox" >
一个输入字段:
显然,输入名称必须与HTML完全匹配此正常工作,包括未在WordPress后端列出的方括号(截图如下)。
改变输入名称:remain_anonymous []似乎已经完成了帽子戏法。尽管页面上只有一个remaining_anonymous实例,但如果没有它们,它将无法正常工作。
我不知道为什么,但它的工作。
谢谢大家的帮助,并感谢ionut建议我发布HTML。我第一次看到它... doh
试试这个,我修改了你的代码。
jQuery(document).ready(function($) {
$('.sponsor_table').hide();
$('.sponsor_address').hide();
$('input[name="remain_anonymous[]"]').click(function(evt){
if($(evt.currentTarget).is(':checked')) {
$('.sponsor_name').hide();
$('.sponsor_logo').hide();
$('.sponsor_website').hide();
} else {
$('.sponsor_name').show();
$('.sponsor_logo').show();
$('.sponsor_website').show();
}
});
$('input[type="radio"]').click(function(){
if($('input[name="cb_sponsor_attendance"]:checked').val() == "Yes"){
$('.sponsor_table').fadeIn('slow');
$('.sponsor_address').hide();
}
else if($('input[name="cb_sponsor_attendance"]:checked').val() == "No"){
$('.sponsor_address').fadeIn('slow');
$('.sponsor_table').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="remain_anonymous-wrap" class="form-row anonymous_sponsor"> <label class="give-label" for="ffm-remain_anonymous">
Make this donation anonymous? <span class="give-tooltip give-icon give-icon-question"
data-tooltip="Details will not be shared on the site, or at the event"></span>
</label>
<span data-required="no" data-type="checkbox"></span>
<span class="ffm-fields">
<label>
<input type="checkbox" name="remain_anonymous[]"
value="Yes, please don't share my identity" />
Yes, please don't share my identity </label>
</span>
</div><div id="cb_sponsor_name-wrap" class="form-row sponsor_name"> <label class="give-label" for="ffm-cb_sponsor_name">
Your Name/Business Name <span class="give-tooltip give-icon give-icon-question"
data-tooltip="This will be shared both online and on the table at the gala."></span>
</label>
<input class="textfield"
id="ffm-cb_sponsor_name" type="text"
data-required="no"
data-type="text" name="cb_sponsor_name"
placeholder="" value=""
size=" 100" />
</div><div id="cb_sponsor_logo-wrap" class="form-row sponsor_logo"> <label class="give-label" for="ffm-cb_sponsor_logo">
Photo/Logo </label>
<div id="ffm-cb_sponsor_logo-upload-container">
<div class="ffm-attachment-upload-filelist">
<a id="ffm-cb_sponsor_logo-pickfiles" class="button file-selector"
href="#">Select File(s)</a>
<span class="ffm-file-validation" data-required="no" data-type="file"></span>
<ul class="ffm-attachment-list give-thumbnails">
</ul>
</div>
</div><!-- .container -->
<script type="text/javascript">
jQuery(function ($) {
//new Give_FFM_Uploader('ffm-cb_sponsor_logo-pickfiles', 'ffm-cb_sponsor_logo-upload-container', 1, 'cb_sponsor_logo', 'jpg,jpeg,gif,png,bmp,', 2048);
});
</script>
</div><div id="cb_sponsor_website-wrap" class="form-row sponsor_website"> <label class="give-label" for="ffm-cb_sponsor_website">
Website </label>
<input id="ffm-cb_sponsor_website" type="url" class="give-url"
data-required="no" data-type="text" name="cb_sponsor_website"
placeholder="" value=""
size="100"/>
</div>
有效,但会影响页面上的所有复选框。每次点击它们时,都会显示/隐藏行为。因此,如果您勾选了“keep_anonymous”,然后决定要支付交易费用或接受条款和条件,则您将隐藏的字段再次显示。 –
我已经将jquery选择器更改为name =“remain_anonymous []”,您在html中使用该选择器。希望有所帮助。请参阅答案编辑 – masif
也请告诉我们了'HTML'。 – Ionut
[使用jQuery显示/隐藏复选框]可能的副本(https://*.com/questions/15766875/show-hide-with-checkbox-using-jquery) – urbz
@urbz - 页面上有另一个复选框,但放在那里的插件,而不是我。我不知道他们使用的代码是什么,所有的HTML都是由插件生成的。我已经在这里尝试了其他六篇文章的建议,如果我已经尝试了所有我能想到/发现的东西,我不觉得我应该被标记为重复文章吗? :/ –