jquery综合操作 checkbox

[初学者的谦卑]

我使用的jquery版本是1.10.2
动态生成的html结构

<span class="label label-default"><input name="RoomID" type="checkbox" value="ID值" />吊灯</span>

默认效果

全选效果

全选JS代码

    $("#checkAll").click(function () {
        $("input[name='RoomID']").prop('checked', this.checked);
        if (this.checked) {
            $("input[name='RoomID']").parent().prop('class', 'label label-success');
        } else {
            $("input[name='RoomID']").parent().prop('class', 'label label-default');
        }

    });

问题一：
但是单独选中一个checkbox是没有效果的
所以我在JS里动态添加html代码的时候使用了一个DMO插件livequery给每一个checkbox绑定单击事件

                $("input[name='RoomID']").livequery('click', function () {
                    if (this.checked) {
                        this.parent().prop('class', 'label label-success');
                    } else {
                        this.parent().prop('class', 'label label-default');
                    }
                });

绑定之后还是没有效果


问题二：
获取全部选中checkbox 的值

        $("input[name='RoomID']:checked").each(function () {
            //alert(this.value);
        });

这样可以获取到value的ID值，但是我还需要 checkbox 后面的文本内容，请问怎么获取？

[无敌兔斯基]

全选:

$("#checkAll").click(function () {
var IsChecked=this.checked;
        $("input[name='RoomID']").each(function(){
if(IsChecked){
          $(this).attr("checked","checked");
            $(this).parent().prop('class', 'label label-success');
        } else {
          $(this).removeAttr("checked");
            $(this).parent().prop('class', 'label label-default');
        }
});
    });

获取checkbox的text

$("input[name='RoomID']:checked").each(function () {
            alert($(this).text());
        });

[无敌兔斯基]

另外你这个对父节点的class操作，可以直接addclass和removeclass,不需要用prop

[初学者的谦卑]

引用 2 楼 denglinfei 的回复:

另外你这个对父节点的class操作，可以直接addclass和removeclass,不需要用prop

因为实现的效果是覆盖原先class，所以用attr或者prop，经过测试prop有效果。以上全选的效果是达到了，请问，我单独选中一个按照我上面的代码，为什么没有效果呢？

[初学者的谦卑]

引用 楼主 u010441225 的回复:

我使用的jquery版本是1.10.2
动态生成的html结构

<span class="label label-default"><input name="RoomID" type="checkbox" value="ID值" />吊灯</span>

默认效果

全选效果

全选JS代码

    $("#checkAll").click(function () {
        $("input[name='RoomID']").prop('checked', this.checked);
        if (this.checked) {
            $("input[name='RoomID']").parent().prop('class', 'label label-success');
        } else {
            $("input[name='RoomID']").parent().prop('class', 'label label-default');
        }

    });

问题一：
但是单独选中一个checkbox是没有效果的
所以我在JS里动态添加html代码的时候使用了一个DMO插件livequery给每一个checkbox绑定单击事件

                $("input[name='RoomID']").livequery('click', function () {
                    if (this.checked) {
                        this.parent().prop('class', 'label label-success');
                    } else {
                        this.parent().prop('class', 'label label-default');
                    }
                });

绑定之后还是没有效果


问题二：
获取全部选中checkbox 的值

        $("input[name='RoomID']:checked").each(function () {
            //alert(this.value);
        });

这样可以获取到value的ID值，但是我还需要 checkbox 后面的文本内容，请问怎么获取？

经过测试alert($(this).text());这个取值方法，好像没有获取大值

[无敌兔斯基]

引用 3 楼 u010441225 的回复:

[quote=引用 2 楼 denglinfei 的回复:] 另外你这个对父节点的class操作，可以直接addclass和removeclass,不需要用prop

因为实现的效果是覆盖原先class，所以用attr或者prop，经过测试prop有效果。以上全选的效果是达到了，请问，我单独选中一个按照我上面的代码，为什么没有效果呢？[/quote] 没有用过livequery插件,所以不太清楚这个情况. 一般用动态绑定事件我都是用$("input[name='RoomID']").live('click',function(){});(貌似1.9以上jquery版本不支持了) 关于alert($(this).text());这个取值方法取不到值,抱歉没有看仔细checkbox是包在span里面的. 试试alert($(this).parent().text());