javascript - 根据复选框选择切换按钮
问题描述
我目前正在构建一个具有 3 个复选框和一个显示在下方的动态按钮的表单。
我当前的问题是,当您选择多个然后再勾选一个时,活动状态和停用状态按钮都会出现
https://staging-homecarepulse.kinsta.cloud/demo-select/这是我的演示链接
这是我使用的脚本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>$(document).on("change", ".mod-link", function() {
var arr = []
$(".mod-link:checked").each(function() {
arr.push($(this).val());
})
if ($(this).is(":checked")) {
$('#picture').attr('src', '');
} else {
$('#picture').attr('src', 'https://staging-homecarepulse.kinsta.cloud/wp-content/uploads/2021/06/greyBTN.jpg');
}
var vals = arr.join(",")
var str = "/demo/?demo_request_type=" + vals;
var link = arr.length > 0 ? '<a class="dynabtn" href="'+str+'">Continue</a>': '' ;
$('.link-container').html(link);
});
</script>
这是我的html
<input type="checkbox" id="checkbox1" class="mod-link" name="selected" value="es" hidden>
<label for="checkbox1" style="cursor: pointer;">CHECK BOX styling and info HERE</label>
<div class="link-container" style="text-align:center;"></div>
<div style="text-align:center;">
<span class="result_img">
<img id="picture" src="https://staging-homecarepulse.kinsta.cloud/wp-content/uploads/2021/06/greyBTN.jpg"/>
</span>
</div>
我想弄清楚如何隐藏灰色图像按钮,直到选中所有或没有复选框。所以简而言之,在选择所有或没有复选框之前,不应该显示#picture
任何帮助表示赞赏
解决方案
您也可以arr.length
提前检查是否显示和隐藏灰色按钮。请看下面的代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>$(document).on("change", ".mod-link", function() {
var arr = []
$(".mod-link:checked").each(function() {
arr.push($(this).val());
})
if (arr.length > 0) {
$('#picture').attr('src', '');
} else {
$('#picture').attr('src', 'https://staging-homecarepulse.kinsta.cloud/wp-content/uploads/2021/06/greyBTN.jpg');
}
var vals = arr.join(",")
var str = "/demo/?demo_request_type=" + vals;
var link = arr.length > 0 ? '<a class="dynabtn" href="'+str+'">Continue</a>': '' ;
$('.link-container').html(link);
});
</script>
希望它能解决你的问题。
推荐阅读
- javascript - 您如何使用 JavaScript 使用用户输入的值在子表中动态创建输入字段?
- c - 为什么接受命令不是套接字中的 euqal 连接命令?
- c# - 构建服务器操作系统与生成的二进制文件之间的依赖关系
- javascript - 是否可以在 iframe 中打开弹出窗口
- javascript - eclipse上启动axelor-erp,web时出现异常
- c++ - 尝试使用链表实现冒泡排序但它不起作用
- elasticsearch - 如何确定 ElasticSearch 的正确堆大小?
- c# - 如何在角度服务中调用 web api
- cmake - 我们如何从主 CMakeLists.txt 文件中引用外部 cmake 文件?
- java - 从 ftp 站点下载文件时,如何使用 tftpget 加速或使用并行执行?人才