隱藏標籤和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如果未選中複選框

回答

相關問題