選中複選框時顯示/隱藏div

當用戶選擇複選框時，需要顯示其他內容。我有下面的代碼：選中複選框時顯示/隱藏div

<!DOCTYPE html> 
<html> 
<head> 
<title>Checkbox</title> 
<script type="text/javascript"> 


$(document).ready(function(){ 
$('#checkbox1').change(function(){ 
if(this.checked) 
$('#autoUpdate').fadeIn('slow'); 
else 
$('#autoUpdate').fadeOut('slow'); 

}); 
}); 

</script> 
</head> 
<body> 
Add another director <input type="checkbox" id="checkbox1"/> 
<div id="autoUpdate" class="autoUpdate"> 
content 
</div> 
</body> 
</html>

真的很感謝一些幫助，良好的HTML5，CSS3知識，但非常基本的JavaScript/jQuery。

來源

2013-10-18 user2890036

你是否包括該網頁上的jQuery庫替換您的代碼？在示例代碼中，我看不到像'這樣的東西。 – andyb

你的問題到底是什麼？ – webduvet

包括圖書館，根本不工作？當選中複選框時，內容不會隱藏 – user2890036

你在你的頭上缺少的jQuery必須包括它。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

你的代碼，根據新信息工程DEMO

更新

$(document).ready(function() { 
    $('#checkbox1').change(function() { 
     if (!this.checked) 
     //^
      $('#autoUpdate').fadeIn('slow'); 
     else 
      $('#autoUpdate').fadeOut('slow'); 
    }); 
});

DEMO

您也可以只使用.fadeToggle（）

$(document).ready(function() { 
    $('#checkbox1').change(function() { 
     $('#autoUpdate').fadeToggle(); 
    }); 
});

來源

2013-10-18 10:41:04 Anton

感謝您的回答 - 它現在的作品不僅僅是我希望它隱藏起來，任何想法我都會去做。再次感謝。 – user2890036

你可以使用CSS，'#autoUpdate {display：none}'@ user2890036檢查這個小提琴http://jsfiddle.net/Alfie/3WEVr/8/ – Anton

謝謝！全部按需要工作。 – user2890036

第一頭包括jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#checkbox1').change(function(){ 
    if($(this).is(":checked")) 
    $('#autoUpdate').fadeIn('slow'); 
    else 
    $('#autoUpdate').fadeOut('slow'); 

    }); 
    }); 
</script>

看到demo

參考:checked和is()

來源

2013-10-18 10:39:29

普萊舍與它下面會幫助你

<!DOCTYPE html> 
<html> 
<head> 
<title>Checkbox</title> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 


$(document).ready(function(){ 
$('#checkbox1').change(function(){ 
if(this.is(":checked") == true) 
$('#autoUpdate').fadeIn('slow'); 
else 
$('#autoUpdate').fadeOut('slow'); 

}); 
}); 

</script> 
</head> 
<body> 
    Add another director <input type="checkbox" id="checkbox1"/> 
<div id="autoUpdate" class="autoUpdate"> 
content 
</div> 
</body> 
</html>

來源

2013-10-18 10:48:24 mmpatel009

你需要用jQuery $（）來包裝這個$（this）.is（'：checked'） – Anton

選中複選框時顯示/隱藏div

回答

相關問題