Question

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

Equipment for Class Room - how it needs to be displayed on the screen

对于图片中的项目，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按钮时，各个值都将发送到该函数。

我有looked at this topic关于使用复选框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();
        });
    });

我确信这是我忽视的东西，但我错过了什么？我将不胜感激任何关于我做错的建议或指导，或者是否有更好的方法来做我正在做的事情。

谢谢！

Answer 1

你可以做这样的事情

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

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

开头

FIDDLE

虽然您可能应该委托，因为您使用ajax来获取元素 - 这假设DOM Ready上存在#mytable - 或者替换为

的祖先元素

$('#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

jQuery - 复选框选择所有行或类似名称＆amp; ID的

1 个答案: