javascript - 如果未选中复选框,则隐藏标签和 img

标签 javascript jquery html css checkbox

<分区>


这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里,这个问题的解决方式不太可能帮助 future 的读者。

关闭 8 年前

我在叠加层中有一些复选框,只要它们未被选中,<img><a>不应看到标记。

<a> 的 HTML和 <img>标签:

<div id="extra">    
    <a href="detail.html?event=theater&datum=01_01" class = "theater">
        <img src="img/theater.png" alt="Theater">
    </a>
    <img src="img/literatur.png" alt="Literatur">
</div>

这是复选框:

<div class="tags">
    <label>
        <input  type="checkbox" rel="alles" id="checkme"/>
        Alles
    </label>
</div>

这是函数:

$("#extra").css("display","none");
$("#checkme").click(function(){
    if ($("#checkme").is(":checked"))
    {
        $("#extra").show("fast");
    } else{
         $("#extra").hide("fast");
    }
});

我也尝试了其他一些方法,但没有任何帮助。

最佳答案

我觉得这样更优雅

$("#extra").hide();
$("#checkme").on("click",function(){
  $("#extra").toggle(this.checked);
});

我假设你在相关对象呈现后执行上述操作,否则你需要

$(function() {
  $("#extra").hide();
  $("#checkme").on("click",function(){
    $("#extra").toggle(this.checked);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="extra">    
    <a href="detail.html?event=theater&datum=01_01" class = "theater">
        <img src="http://png-1.findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/theatre_masks.png" alt="Theater">
    </a>
    <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/128/Books-2-icon.png" alt="Literatur">
</div>

<div class="tags">
    <label>
        <input  type="checkbox" rel="alles" id="checkme"/>
        Alles
    </label>
</div>

关于javascript - 如果未选中复选框,则隐藏标签和 img,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27964068/

上一篇:html - 导航栏不会去中心

下一篇:CSS 文本与多个 Div 对齐

相关文章:

javascript指针数组或#define缩写

javascript - 使用 jquery 按属性删除 html 元素

javascript - 使用jquery多个div加载数据

javascript - 如何使用 AngularJs 从输入或文本区域中删除特殊字符?

javascript - 缺少 Google map RouteBoxer API

javascript - 懒惰的html内容

javascript - 如果 highcharts.js 没有数据,图表容器的最小高度

javascript - 滚动将视频 div 移动到页面上的另一个位置

html - 如何在Firefox/IE/Chrome中使用浏览器显示ppt/doc/xls/pdf

javascript - 如何获取点击表格的行列信息