javascript - jQuery - 复选框选择一行中的所有内容或具有相似名称和 ID

Question

使用 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 按钮，单击该按钮会将选中的框的值传递给另一个函数。用户可以选择任意数量的单个框(旁边有数字的框)，而不管这些项目与哪个房间相关联。但是，当用户选择房间复选框时，ALL 还应选中该房间的各个复选框。个人值(value)观是我想要的。单击 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 被点击/更改时 - 在所有输入上设置 checked 属性，其 id 以当前点击的元素 id

开头

FIDDLE

虽然您可能应该委托(delegate)，因为您正在使用 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