开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery来显示隐藏的div块，在选中复选框时没有显示。

问Jquery来显示隐藏的div块，在选中复选框时没有显示。
EN

Stack Overflow用户

提问于 2016-08-17 12:17:49

回答 1查看 13关注 0票数 0

我有一个jquery函数，它应该显示与复选框相关联的div块，并在未选中的chekcbox中单击并隐藏。当单击每个检查时，如何显示所选的div与ckecbox相关联。当我检查和取消检查它没有显示隐藏的div元素时

我试过用这个

 $(this).find(".filterBlock").show();

这是我的代码和小提琴

$(document).ready(function(){
      $(".filterBlock").hide();
   //fitlers
   $(".checkbox-container :checkbox").click(function() {
       $("div.filterBlock").hide();
       $(".checkbox-container :checkbox:checked").each(function() {
           alert($(this).val());
         //  $(this).show();

           $(this).find(".filterBlock").show();
       });
});


});

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-08-17 12:24:01

您可以使用：

$(".filterBlock").hide();
$(".checkbox-container :checkbox").click(function() {
  $(this).closest('.row').next('.row').find('.filterBlock').toggle()
});

票数 2

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39005546

复制

相关文章

[CSS]JQuery 操作CSS使DIV显示或者隐藏

在某些需求中，你需要点击按钮显示某个div，并隐藏已经显示的按钮。同时点击另外一个按钮，又会隐藏已经显示的，并显示已经影藏的。当然当你使用mvvm框架（vue，react之类的）的框架的时候是不存在这些问题的。显然，当你翻到我这个博客的时候是没有用vue之类的，因此，你只要看我下面的代码就好了

用户2353021

2020/05/11

4.2K0

jquery 默认隐藏div,点击按钮显示，再次点击隐藏

java https 网络安全 html

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/106383.html原文链接：https://javaforall.cn

全栈程序员站长

2022/06/30

9K0

[1097]DIV的显示与隐藏

block display hidden visibility

*********************div的显示和隐藏************************************

周小董

2022/04/13

5.3K0

jq 控制显示隐藏div

attr class display hide

之前一直使用attr("style","display:none;")来隐藏div

用户1215037

2021/09/22

12.4K0

【jQuery动画】显示与隐藏效果

jquery css html 腾讯云开发者社区

在网页开发中，适当地使用动画可以使页面更加美观，进而增强用户体验。jQuery中内置了一系列方法用于实现动画，当这些方法不能满足实际要求时，用户也可以自定义动画。本期我们一起来了解一下显示与隐藏效果吧~

颜颜yan_

2022/12/01

6.8K0

【jQuery动画】显示与隐藏效果

JQuery 隐藏和显示html元素

bash bash 指令

$(function(){ $("#bubmitBtn").click(function(){ //首先需要把提示标签全部隐藏掉 $("#nameInvalid").hide(); $("#emailInvalid").hide(); $("#pwdInvalid1").hide(); $("#pwdInvalid2").hide(); //检查用户名: 长度为6到12位, 只能输入数字和英文和下划线 //alert("--"); var $nameEle = $("#UcenterMember_account"); var reg = /^\w{6,12}$/; if(!reg.test($nameEle.val())) { $("#nameInvalid").text(" *用户名长度为6到12位, 只能输入数字和英文和下划线"); $("#nameInvalid").show(); //alert("用户名长度为6到12位, 只能输入数字和英文和下划线"); $nameEle[0].focus(); return false; } //邮箱格式必须正确, 可以不输入 var $emailEle = $("#UcenterMember_email"); reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; if($emailEle.val()!="" && !reg.test($emailEle.val())) { $emailEle[0].focus(); $("#emailInvalid").text(" *邮箱格式不正确!"); $("#emailInvalid").show(); //alert("邮箱格式不正确!"); return false; } //检查密码: 长度为6位, 只能输入数字和英文 var $passwordEle = $("#UcenterMember_password1"); reg = /^[a-zA-Z0-9]{6,15}$/; if(!reg.test($passwordEle.val())) { $("#pwdInvalid1").text(" *密码的最低长度为6位, 只能输入数字和英文"); $("#pwdInvalid1").show(); //alert("密码的长度为6位, 只能输入数字和英文"); $passwordEle[0].focus(); return false; } //确认密码必须与密码相同 var $password2Ele= $("#UcenterMember_password2"); if($password2Ele.val()!=$passwordEle.val()) { $password2Ele[0].focus(); $("#pwdInvalid2").text(" *确认密码必须与密码相同"); $("#pwdInvalid2").show(); //alert("确认密码必须与密码相同"); } return true; }); });

wust小吴

2019/07/05

9.4K0

jQuery地址显示隐藏和切换

上述示例中，我们创建了一个包含地址信息和切换按钮的容器。地址信息使用<p>元素进行展示，切换按钮使用<button>元素，并为其添加一个自定义的类名toggle-btn。

堕落飞鸟

2023/05/18

3.4K0

vue项目中div切换显示与隐藏状态时的动画效果

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

裴大头

2022/01/17

3.8K0

含有复选框的表格显示与隐藏切换

如果使用v-if，注意使用this.nextTick，并且this.nextTick 放的位置在里面，不要显示表格的时候就使用this.

tianyawhl

2020/12/16

2.3K0

含有复选框的表格显示与隐藏切换

今日作业 -- 用js控制DIV的显示隐藏

javascript 容器

这个题很简单的，就是用一个按钮切换二个菜单的显示和隐藏。比昨晚的查找重复字符串要简单的多。参与写作业的同学们基本都写的不错，思路也都OK，用原生JS，jQuery，ES6都可以，，暴露出来的问题主

web前端教室

2018/02/06

17.2K0

今日作业 -- 用js控制DIV的显示隐藏

jQuery二级菜单的显示隐藏

在jQuery中创建二级菜单的显示和隐藏可以通过使用事件处理函数和CSS样式来实现。

堕落飞鸟

2023/05/18

3.5K0

【实用】div选中添加√，并将选中的图片在其他地方显示

在工作中我们有可能会遇到：这里开个就做个简单的demo: 直接上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击div左上角出现对勾选中效果</title> <style type="text/css"> #box { margin: 20px auto; height: 100px; width: 150px; position: relative; cursor: pointer; overflow:

凯哥Java

2022/12/15

1.3K0

【实用】div选中添加√，并将选中的图片在其他地方显示

【实用】div选中添加√，并将选中的图片在其他地方显示

在工作中我们有可能会遇到：这里开个就做个简单的demo: 直接上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击

凯哥Java

2019/06/28

1.7K0

【实用】div选中添加√，并将选中的图片在其他地方显示

html div 隐藏滚动条样式,div滚动条样式隐藏与显示

html javascript css

DIV滚动条样式是可以设置的，CSS滚动条同样也可以显示与隐藏，对div设置滚动条，设置其横向滚动条和纵向滚动条样式应该怎么做呢？

全栈程序员站长

2022/09/14

9K0

点击按钮平移隐藏与显示div（使用translate）

css3 transform变换后，原来的位置还占据空间，那是因为 transform并没有让元素脱离标准流；解决方法: 可以考虑在写了transform属性后,结合position:absolute脱离标准流

tianyawhl

2019/04/04

4.2K0

jQuery限制复选框checkbox的选中次数

jquery checkbox

<div class="one"> <input type="checkbox" name="checkbox" value="A"> </div> <div class="two"> <input type="checkbox" name="checkbox" value="B"> </div> <div class="three"> <input type="checkbox" name="

明知山

2020/09/03

2.4K0

JQuery | CheckBox 复选框数据源回填显示操作

jquery checkbox 权限数据数组

躺平程序员老修

2023/09/05

2691

全选-复选框-控制表格的列的显示和隐藏

key 表格索引

在做一些后台数据统计功能时,需要做一些展示层面上的过滤,结合复选框,显示和隐藏某一列或某一行

itclanCoder

2021/11/30

3.9K0

全选-复选框-控制表格的列的显示和隐藏

Jquery DataTable 的学习之隐藏和显示列（三）

在大数据量的前提下，会出现列很多的情况，浏览器会呈现出滚动条，但是用户需要看到的并不一定是所有的信息，那么就需要对表格的数据进行筛选，在前面的文章中介绍到了搜索和排序，这都是对数据的筛选功能，但是列数过多会导致用户查看数据非常麻烦。如果可以将不想看到的列隐藏掉就可以了，下面来看一下代码。

OECOM

2020/07/01

3.1K0

Android控件显示、隐藏时，增加动画效果

首先还是看一下演示效果吧，不然凭什么相信我的帖子能解决你的问题呢？效果GIF如下

晨曦_LLW

2020/09/25

5K0

相似问题

jQuery -选中复选框时隐藏/显示div

50

选中复选框时，使用jquery显示/隐藏div

30

jQuery:选中或未选中复选框时隐藏显示div

22

jQuery +多个复选框:选中时显示div，取消选中时隐藏

52

选中复选框时显示/隐藏div

30

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验