隐藏标签和img如果未选中复选框

我在叠加中有一些复选框，只要未检查，<img>和<a>标签不应该被看到。隐藏标签和img如果未选中复选框

HTML的<a>和<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"); 
    } 
});

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

来源

2015-01-15 th3infinity

适用于我http://jsfiddle.net/j08691/d48wLvoL/。你是通过document.ready调用还是在body的最后运行你的代码？ – j08691

你的问题是什么？你的代码也可以运行http://jsfiddle.net/d48wLvoL/1/。你可能会忘记包含jquery文件.. –

确定那是疯狂的^^，因为我再次尝试，它没有工作，但后来我试了一次，现在它正在工作oo – th3infinity

这是在我看来

$("#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>

来源

2015-01-15 13:03:17 mplungjan

感谢您的帮助，即使我现在不需要它^ ^因为它在工作 – th3infinity

不客气 – mplungjan

这小提琴http://jsfiddle.net/yfnen44e/有一个工作的例子。我假设你只想隐藏链接图像#extra而不是整个div。

var $extra = $('#extra a').hide(); 
$('#checkme').on('click', function(){ 
    $extra.toggle(this.checked); 
});

来源

2015-01-15 13:08:55 Scottux

试试这个变化：您的代码放入$(document).ready(function() {your code here});

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

live demo

来源

2015-01-15 13:15:44

有很多方法可以做到这一点，其中之一是使用jQuery .prop方法来获取属性的值。

$("#checkme").click(function() { 
 
    if ($("#checkme").prop('checked')) { 
 
     $("#extra").show("fast"); 
 
    } else { 
 
     $("#extra").hide("fast"); 
 
    } 
 
    });

#extra { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

注：使用jQuery .CSS增加了内联CSS文档。

来源

2015-01-15 13:27:34

隐藏标签和img如果未选中复选框

回答

相关问题