具有类名的多个复选框更改功能，但在javascript中具有相同的类名

Question

我的html和javascript（带有jQuery）代码在这里。 我做了一个片段，以实现更好的可视化效果，所以请看一看。 我在摘要下方描述了我的问题。

  $(document).ready(function(){ $('.move_to_choice2Checkbox').click(function (){ var cca_item_id = $(this).closest('tr').find('td option:selected').eq(0).val(); console.log(cca_item_id); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <TABLE ID="qfdetails"> <TBODY> <TR> <TD CLASS="col-lg-3">CCA Items</TD> <TD CLASS="col-lg-3">Year Groups</TD> <TD CLASS="col-lg-4">CCA Teacher</TD> <TD CLASS="col-lg-3" /> </TR> <TR> <TD DATA-ID="0"> <SELECT CLASS="form-control" ID="cca_item_id" NAME="choice1[]"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="4">Drawing</OPTION> <OPTION VALUE="5">Swimming</OPTION> </SELECT> </TD> <TD> <SELECT CLASS="form-control tokenize-demo" ID="year_groups" MULTIPLE="" NAME="choice1[]" STYLE="display: none;"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="1">STD I - A</OPTION> <OPTION VALUE="2">STD II - B</OPTION> </SELECT> </TD> <TD> <SELECT CLASS="form-control tokenize-demo" ID="teacher_emails" MULTIPLE="" NAME="choice1[]" STYLE="display: none;"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="xx.s@example.com">xyz</OPTION> </SELECT> </TD> <TD> <INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox"> </TD> </TR> <TR> <TD DATA-ID="0"> <SELECT CLASS="form-control" ID="cca_item_id" NAME="choice1[]"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="4">Drawing</OPTION> <OPTION VALUE="5">Swimming</OPTION> </SELECT> </TD> <TD> <SELECT CLASS="form-control tokenize-demo" ID="year_groups" MULTIPLE="" NAME="choice1[]" STYLE="display: none;"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="1">STD I - A</OPTION> <OPTION VALUE="2">STD II - B</OPTION> </SELECT> </TD> <TD> <SELECT CLASS="form-control tokenize-demo" ID="teacher_emails" MULTIPLE="" NAME="choice1[]" STYLE="display: none;"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="xx.s@example.com">xyz</OPTION> </SELECT> </TD> <TD> <INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox"> </TD> </TR> <TR> <TD DATA-ID="0"> <SELECT CLASS="form-control" ID="cca_item_id" NAME="choice1[]"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="4">Drawing</OPTION> <OPTION VALUE="5">Swimming</OPTION> </SELECT> </TD> <TD> <SELECT CLASS="form-control tokenize-demo" ID="year_groups" MULTIPLE="" NAME="choice1[]" STYLE="display: none;"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="1">STD I - A</OPTION> <OPTION VALUE="2">STD II - B</OPTION> </SELECT> </TD> <TD> <SELECT CLASS="form-control tokenize-demo" ID="teacher_emails" MULTIPLE="" NAME="choice1[]" STYLE="display: none;"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="xx.s@example.com">xyz</OPTION> </SELECT> </TD> <TD> <INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox"> </TD> </TR> </TBODY> </TABLE> 

但是，此代码仅适用于第一个复选框。 当我单击第二和第三个复选框时，它不返回任何内容或未在单击功能中输入。 这有什么问题，这三个复选框具有相同的类名。 请帮我。

Answer 1

如果随后的复选框是动态添加的，则在声明“ click”处理程序之后，该事件将不会绑定到它们，因为在执行该代码时它们不存在。

一种解决方案是使用jQuery提供的“委托事件”模式。 只需将事件绑定到DOM较高的元素上，该元素在单击处理程序执行时保证存在，然后将您实际想要响应事件的（可能动态创建的）元素的选择器传递给它。 然后，当单击更高级别元素中的任何内容时，jQuery会检查是否存在与选择器匹配的新元素，并专门为其触发click事件。

您可以这样写：

$("#qfdetails").on("click", ".move_to_choice2Checkbox", function () {

在这种情况下，要使用的最接近逻辑上层元素是表，但是如果元素没有其他共同祖先，则可以使用document 。 理想情况下，您应该使用最接近的公共祖先，因为这样可以更好地提高性能。

有关更多详细信息，请参见http://api.jquery.com/on/ ，特别是标题为“直接和委托事件”的部分。

Answer 2

我不得不指出，您可能会代替td兄弟姐妹。 您还可以考虑是否希望像我的示例那样接受选中/未选中状态。 您还可以考虑使用更改而不是单击事件，因为可能会通过代码或其他方式更改值。

另外，您还有一个ID，其中MIGHT用于访问的速度比使用closest, siblings遍历更快。但是它是无效的，因为存在ID="cca_item_id"重复项，这会使HTML无效。

请注意，我将OTHER无效的HTML留在原处（其他重复的ID）-请考虑使用类，然后使用这些类进行选择。

 $(function() { $('#qfdetails').on('change', '.move_to_choice2Checkbox', function() { if (this.checked) { var cca_item_id = $(this).closest('td') .siblings().first() .find('option:selected').eq(0).val(); console.log(cca_item_id); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <TABLE ID="qfdetails"> <TBODY> <TR> <TD CLASS="col-lg-3">CCA Items</TD> <TD CLASS="col-lg-3">Year Groups</TD> <TD CLASS="col-lg-4">CCA Teacher</TD> <TD CLASS="col-lg-3" /> </TR> <TR> <TD DATA-ID="0"> <SELECT CLASS="form-control" ID="cca_item_id1" NAME="choice1[]"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="4">Drawing</OPTION> <OPTION VALUE="5">Swimming</OPTION> </SELECT> </TD> <TD> <SELECT CLASS="form-control tokenize-demo" ID="year_groups" MULTIPLE="" NAME="choice1[]" STYLE="display: none;"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="1">STD I - A</OPTION> <OPTION VALUE="2">STD II - B</OPTION> </SELECT> </TD> <TD> <SELECT CLASS="form-control tokenize-demo" ID="teacher_emails" MULTIPLE="" NAME="choice1[]" STYLE="display: none;"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="xx.s@example.com">xyz</OPTION> </SELECT> </TD> <TD> <INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox"> </TD> </TR> <TR> <TD DATA-ID="0"> <SELECT CLASS="form-control" ID="cca_item_id2" NAME="choice1[]"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="4">Drawing</OPTION> <OPTION VALUE="5">Swimming</OPTION> </SELECT> </TD> <TD> <SELECT CLASS="form-control tokenize-demo" ID="year_groups" MULTIPLE="" NAME="choice1[]" STYLE="display: none;"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="1">STD I - A</OPTION> <OPTION VALUE="2">STD II - B</OPTION> </SELECT> </TD> <TD> <SELECT CLASS="form-control tokenize-demo" ID="teacher_emails" MULTIPLE="" NAME="choice1[]" STYLE="display: none;"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="xx.s@example.com">xyz</OPTION> </SELECT> </TD> <TD> <INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox"> </TD> </TR> <TR> <TD DATA-ID="0"> <SELECT CLASS="form-control" ID="cca_item_id3" NAME="choice1[]"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="4">Drawing</OPTION> <OPTION VALUE="5">Swimming</OPTION> </SELECT> </TD> <TD> <SELECT CLASS="form-control tokenize-demo" ID="year_groups" MULTIPLE="" NAME="choice1[]" STYLE="display: none;"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="1">STD I - A</OPTION> <OPTION VALUE="2">STD II - B</OPTION> </SELECT> </TD> <TD> <SELECT CLASS="form-control tokenize-demo" ID="teacher_emails" MULTIPLE="" NAME="choice1[]" STYLE="display: none;"> <OPTION VALUE="">Please Select</OPTION> <OPTION VALUE="xx.s@example.com">xyz</OPTION> </SELECT> </TD> <TD> <INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox"> </TD> </TR> </TBODY> </TABLE>