3

使用 jQuery 1.9.1 并获取从需要显示在网页中的查询返回的 XML，如下图所示。几天前我问过一个类似的问题，但我问的问题到处都是。希望这次能提出更好的问题。

教室设备 - 如何在屏幕上显示

对于图片中的项目，XML 输入将是：

<Classrooms>
    <Room Number="3">
        <Machine>310</Machine>
        <Machine>320</Machine>
        <Machine>340</Machine>
        <Machine>350</Machine>
    </Room>
    <Room Number="8">
        <Machine>810</Machine>
        <Machine>820</Machine>
        <Machine>840</Machine>
    </Room>
    <Room Number="10">
        <Machine>1010</Machine>
        <Machine>1020</Machine>
    </Room>
</Classrooms>

下面的代码是一个函数，它在成功时调用并在网页上的表格中 AJAX GET构建。checkboxes

var $roomList = $( items );
var roomListString = jQ_xmlDocToString( $roomList );
var roomListXML = $.parseXML(roomListString);

$(roomListXML).find("Row").each(function() {
    var activeRooms = $( roomListXML ).find("Row").text();
    var nbrRooms = $(activeRooms).find("Room").size();
    $(activeRooms).find("Room").each(function() {
        var roomNo = $(this).attr("Number");
        var roomchk = "Room"+roomNo;
        var $tr = $("<tr />");
        $tr.append('<td><input type="checkbox" name="'+roomchk+'" id="'+roomchk+'" class="checkall" /><label for="'+roomchk+'">Room '+roomNo+'</td>');
        $("#mytable").append( $tr );

        $(this).children().each(function() {
            var machID = $(this).text();
            var idname = "Room"+roomNo+"Mach"+machID;
            $tr.append('<td><input type="checkbox" name="'+idname+'" id="'+idname+'" /><label for="'+idname+'">'+machID+'</td>');
            $("#mytable").append( $tr );
            });
        });
    });

当上面的代码在数据上运行时，HTML表中的 如下图所示。 

<tbody>
   <tr>
     <td>
       <input name="Room3" id="Room3" class="checkall" type="checkbox" />
       <label for="Room3">Room 3</label>
     </td>
     <td>
       <input name="Room3Mach310" id="Room3Mach310" type="checkbox" />
       <label for="Room3Mach310">310</label>
     </td>
     <td>
       <input name="Room3Mach320" id="Room3Mach320" type="checkbox" />
       <label for="Room3Mach320">320</label>
     </td>
     <td>
       <input name="Room3Mach340" id="Room3Mach340" type="checkbox" />
       <label for="Room3Mach340">340</label>
     </td>
     <td>
       <input name="Room3Mach350" id="Room3Mach350" type="checkbox" />
       <label for="Room3Mach350">350</label>
     </td>
   </tr>
   <tr>
     <td>
       <input name="Room8" id="Room8" class="checkall" type="checkbox" />
       <label for="Room8">Room 8</label>
     </td>
     <td>
       <input name="Room8Mach810" id="Room8Mach810" type="checkbox" />
       <label for="Room8Mach810">810</label>
     </td>
     <td>
       <input name="Room8Mach820" id="Room8Mach820" type="checkbox" />
       <label for="Room8Mach820">820</label>
     </td>
     <td>
       <input name="Room8Mach840" id="Room8Mach840" type="checkbox" />
       <label for="Room8Mach840">840</label>
     </td>
   </tr>
   <tr>
     <td>
       <input name="Room10" id="Room10" class="checkall" type="checkbox" />
       <label for="Room10">Room 10</label>
     </td>
     <td>
       <input name="Room10Mach1010" id="Room10Mach1010" type="checkbox" />
       <label for="Room10Mach1010">1010</label>
     </td>
     <td>
       <input name="Room10Mach1020" id="Room10Mach1020" type="checkbox" />
       <label for="Room10Mach1020">1020</label>
     </td>
   </tr>
</tbody>

选择页面上的任何复选框将启用页面SUBMIT上的按钮，单击该按钮会将选中的框的值传递给另一个函数。用户可以选择任意数量的单个框（旁边带有数字的框），而不管这些项目与哪个房间相关联。但是，当用户选择房间复选框时，该房间的所有单个复选框也应该被选中。个人价值观是我想要的。单击按钮时SUBMIT，各个值将被发送到该函数。

我看过这个关于使用复选框class全选的主题。

我正在使用下面的代码来查找检查的内容。当我选择一个单独的框时，我可以看到它被添加到数组中。当我选择一个找到的房间时，我也可以看到checkall，但是一旦我这样做，我似乎无法检查各个复选框。我一直在尝试使用Attribute Starts With jQuery 选择器，但无法让它选中这些框。 

$("#mytable").click(function(e) {
    var ele = $(this).find(":checkbox");
    var zall = $(this).find(":checkbox.checkall:checked");
    if (zall) {
        var zname = $(zall).attr("name");
        var selectallmachines = "input[name^='" + zname +"']:checked:enabled";
        $( $(selectallmachines), "#mytable");
        }
    var arr = [];
    $(":checkbox:checked").each(function(i) {
        arr[i] = $(this).val();
        });
    });

我确定这是我忽略的东西，但我错过了什么？希望有任何关于我做错了什么的建议或指导，或者是否有更好的方法来做我正在做的事情。

谢谢！

4

1 回答 1

2

你可以做这样的事情

$('.checkall').change(function(){
   $('input[id^='+this.id+']').prop('checked',this.checked);
});

何时.checkall单击/更改 - 在所有输入上设置选中的属性，其 id 以当前单击的元素开头id

FIDDLE

尽管您可能应该委托，因为您使用 ajax 来获取元素 - 这是假设#mytable存在于 DOM Ready 上 - 或者替换为一个祖先元素

$('#mytable').on('click','.checkall',function(){
     $('input[id^='+this.id+']').prop('checked',this.checked);
});

另一种选择是将checkall id作为类提供给相关复选框

$tr.append('<td><input type="checkbox" name="'+idname+'" id="'+idname+'" class="'+roomchk+'"/><label for="'+idname+'">'+machID+'</td>');

那么你可以做

$('#mytable').on('click','.checkall',function(){
     $('input.'+this.id).prop('checked',this.checked);
});

FIDDLE

于 2013-08-07T14:20:43.140 回答