我正在创建复选框内的复选框,所有复选框都应显示在下拉列表框中。我成功地在下拉列表框中创建了几个复选框。点击链接http://vignesh.gvignesh.org/metroplots/drp/drpcheck.php
现在我正在尝试创建一个复选框,该复选框应在用户单击一个复选框后显示。例如,如果用户检查文档,那么复选框下面会出现一些复选框。
Eg. []Documents (if user checks main, the sub checkboxes should appear)
[]Doc 1
[]Doc 2
[]Doc 3
[]Phots (if user checks)
[]photo 1
[]photo 2
[]photo 3
如何通过javascript或jquery实现此目的。
先谢谢。 !!
答案 0 :(得分:1)
有不同的方法可以做到这一点。这就是我所做的:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.team').on('click',function(){
if($(this).is(':checked')){
$(this).next().next().show();
}else{
$(this).next().next().hide();
}
});
});
</script>
</head>
<body>
<form name="FootballClubs">
<input type="checkbox" class="team" value="RealMadrid"/>Real Madrid<br />
<div style="padding:10px 10px 10px 15px;display:none;">
<input type="checkbox" class="player" value="CR"/>Cristiano Ronaldo<br />
<input type="checkbox" class="player" value="SA"/>Shabi Alanso<br />
<input type="checkbox" class="player" value="IC"/>Iker Casillias<br />
</div>
<input type="checkbox" class="team" value="ManCity"/>Man City<br />
<div style="padding:10px 10px 10px 15px;display:none;">
<input type="checkbox" class="player" value="SA"/>Sergio Aguero<br />
<input type="checkbox" class="player" value="SM"/>Super Mario<br />
</div>
</form>
</body>
</html>
这是完全有效的例子。此外,您可以在已选中的元素再次隐藏时取消选中它们。