jquery点击复合隐藏显示内容

最新推荐文章于 2022-09-03 17:35:15 发布

咕噜咕噜鱼s

最新推荐文章于 2022-09-03 17:35:15 发布

阅读量377

点赞数

分类专栏： JQUERY

JQUERY 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种使用jQuery实现元素显示和隐藏的方法。通过监听复选框的状态变化，当至少有一个复选框被选中时，显示指定的段落元素；反之，则隐藏该元素。此外，还提供了一个全选功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
    $(function(){
     var _d = $('#d :checkbox');
        $('#p1').hide();
        _d.click(function(){
            if($('#d :checkbox:checked').length > 0){//id为'd'下边的复选框，并且选中的，的总个数大于0，也就是有选中的复选框
                $('#p1').show();
            }else{
                $('#p1').hide();
            }
        })
        $('#checkAll').click(function(){
            if($(this).is(':checked')){
                _d.attr('checked','checked');
                $('#p1').show();
            }else{
                _d.removeAttr('checked');
                $('#p1').hide();
            }
        })
    })
</script>
<input id="checkAll" type="checkbox">checkAll<br />
<div id='d'>
<input type="checkbox">1
</div>
<div id='e'>
<input type="checkbox">1
</div>
<div id='f'>
<input type="checkbox">1
</div>
<p id="p1">p tag</p>