首页新闻找找看学习计划

这个代码中一次点击全选就可以,再次点击就选中不了了,请问哪位大神帮忙补充一下

0
[待解决问题]
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.selected{

}
</style>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(function() {
$("#checkAll").click(function() {
$('input[name="subBox"]').attr("checked",this.checked);
});
var $subBox = $("input[name='subBox']");
$subBox.click(function(){
$("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
});
});
</script>
</head>
<body>
<div>
<input id="checkAll" type="checkbox"/>全选
<input name="subBox" type="checkbox"/>项1
<input name="subBox" type="checkbox"/>项2
<input name="subBox" type="checkbox"/>项3
<input name="subBox" type="checkbox"/>项4
</div>
</body>
</html>
前端学步的主页 前端学步 | 菜鸟二级 | 园豆:211
提问于:2016-06-02 19:41
< >
分享
所有回答(3)
0
$(function() {
    $('#checkAll').click(function() {
        $('input[name="subBox"]').prop('checked', this.checked);
    });
    var $subBox = $('input[name="subBox"]');
    $subBox.click(function(){
        $('#checkAll').prop('checked', $subBox.length == $('input[name="subBox"]:checked').length ? true : false);
    });
});

 

RosonJ | 园豆:2662 (老鸟四级) | 2016-06-03 08:58

那我想然让选中的那一项字体变色呢,怎么写

支持(0) 反对(0) 前端学步 | 园豆:211 (菜鸟二级) | 2016-06-03 09:47

@前端学步: 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .selected{
            color: red;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        $(function() {
            $('#checkAll').click(function() {
                $('input[name="subBox"]').prop('checked', this.checked);

                ChangeSelected();
            });
            var $subBox = $('input[name="subBox"]');
            $subBox.click(function(){
                $('#checkAll').prop('checked', $subBox.length == $('input[name="subBox"]:checked').length ? true : false);

                ChangeSelected();
            });
        });

        function ChangeSelected() {
            $('[name="subBox"]').each(function() {
                if (this.checked) {
                    $(this).next('[name="title"]').addClass('selected');
                } else {
                    $(this).next('[name="title"]').removeClass('selected');
                }
            })
        }
    </script>
</head>
<body>
    <div>
        <input id="checkAll" type="checkbox"/>全选
        <input name="subBox" type="checkbox"/><span name="title">项1</span>
        <input name="subBox" type="checkbox"/><span name="title">项2</span>
        <input name="subBox" type="checkbox"/><span name="title">项3</span>
        <input name="subBox" type="checkbox"/><span name="title">项4</span>
    </div>
</body>
</html>
支持(0) 反对(0) RosonJ | 园豆:2662 (老鸟四级) | 2016-06-03 09:58

@RosonJ: <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
.show{
display: block;
}
</style>

</head>
<body>
<div>
<div class="b-1">
<div class="hang"> <span class="jian">-</span>aaa</div>
<div class="show">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div class="b-1">
<div class="hang"> <span class="jian">-</span>aaa</div>
<div class="show">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div class="b-1">
<div class="hang"> <span class="jian">+</span>aaa</div>
<div class="hide">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</div>
</body>
</html>

 

非常感谢在您刚刚发过来的时候我做出来了,最近的一个项目遇见了这个内容,其实我经常做,我只是想通过<span>-</span>的文本内容做判断做出这个点击展开隐藏的效果,但是一直做的不对,相信你懂 我的意思

支持(0) 反对(0) 前端学步 | 园豆:211 (菜鸟二级) | 2016-06-03 10:11

@前端学步: 

在另一個問題回覆你了

支持(0) 反对(0) RosonJ | 园豆:2662 (老鸟四级) | 2016-06-03 10:20
0

attr换成prop

幻天芒 | 园豆:36522 (高人七级) | 2016-06-03 09:03
0

给你看一个网址吧,希望能对你有帮助 http://www.cnblogs.com/xibianriluo/p/5489271.html

如此低调的男人 | 园豆:840 (小虾三级) | 2016-06-03 14:20
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册