javascript - 增加输入标签内的 ID 属性

Question

我在表内有一个表，其中每个字段都附加了复选按钮。共有三个级别1)。选择所有信息2)。家长3)。 child

我想要做的是，如果我选择“选择所有信息”复选框，它会选择所有工作正常的复选框。我无法做的是，如果我选择“父级”复选框，它应该选择所有子级的复选框。我试图增加 Child_id 字段，但没有得到任何富有成效的结果。

下面是我正在尝试的代码，任何帮助或指导都会有用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
  </script>

<script>
  $(function select(){
	     $("#Select_All").change(function () {
          $("#Parent_Id, #Child_Id").prop("checked", this.checked);
           });
 
$("#Parent_Id").change(function(){ 
        var i=0;   
        $('#Child_Id').each(function(){
        i++;
        var newID='Child_Id'+i;
        $(this).attr('id', newID);
        $(this).val(i);
             $(newID).prop("checked", this.checked);
 });});});
	</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<TABLE BORDER="3" CELLPADDING="10" CELLSPACING="10">
    <input type="checkbox" id = "Select_All" name="Main"  />Select All Information
<TD>
     <input type="checkbox" id = "Parent_Id" name="PPP" class = "Parent_Class" />parent

<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="3">
       
<div>
  <TD>
 <input type="checkbox" id = "Child_Id" name="CCC" class = "Child_Class" /> Child1 </TD>     

 <TD>  
 <input type="checkbox" id = "Child_Id" name="CCC" class = "Child_Class" />Child2</TD> 
 <TR>
 <TD> 
<input type="checkbox" id = "Child_Id" name="CCC" class = "Child_Class" /> Child3</TD>  
<TD>  <input type="checkbox" id = "Child_Id" name="CCC" class = "Child_Class" />Child4
 </TD>  
</TR>
 </div>
</TABLE>
</TD>
<TD>     <input type="checkbox" id = "Child_Id" name="CCC" class = "Child_Class" />
 A table inside a table.</TD>
</TABLE>

Answer 1

试试这个:

$("#Select_All").change(function () {
	$("#Parent_Id, #Child_Id").prop("checked", this.checked);
});
$("#Parent_Id").change(function(){ 
   	//var i=0;   
    var isParentChecked = $(this).prop('checked');
   	$('.Child_Class').each(function(){
        //i++;
        //var newID='#Child_Id'+i;
            //console.log(newID);
        //$(this).attr('id', newID);
        //$(this).val(i);
       	$(this).prop("checked",isParentChecked);
 	});
});

由于您更改了每个子元素的 id，因此您选中/取消选中最顶层的父元素 (Select_All)，只有“父”元素会受到影响，因此我注释了一些代码行以使其正常运行。

DEMO