当一个复选框（配对）之一检查时

Question

我有一个 4 列和 n 行的表。根据我从后端获得的记录，没有。行数增加。在每一行中，最后一列有两个具有不同 ID 的复选框。在页面加载时，这些复选框可能会或可能不会从后端选中。当检查任一复选框时，我必须在复选框下方的Div中显示/隐藏一条消息。所以它有两个部分。 1. 此消息将在页面加载时显示已选中的复选框，因为该复选框可能已被选中 2. 此消息将显示为单击时新选中的复选框。

我尝试在 $(document).ready(function(){}); 中使用 document.getelementbyID但我得到一个行列表，其中每一行在最后一列都有一对复选框。

我尝试在 onClick 事件中进行更改，但单击时调用的 javascript 在不同的 jsp 上。此外，每个复选框都会点击其 onclick 事件，而我无法检查第二个复选框是否被选中。

Answer 1

为了解决这个问题，我创建了一个函数，它首先清除 .msg div 中的所有文本，以便每次运行该函数时都会刷新它。然后每个检查的输入都有一个函数在其上运行，该函数获取它的标签文本内容，标识单个复选框名称，并将该文本附加到 .msg div。我在页面加载时运行此功能，并且每次选中一个复选框。你或许可以稍微优化一下这个功能，但这就是重点。

我已经修改了你的标记并编写了新的 jQuery 来处理这个问题 - https://jsfiddle.net/Shuaso/xebjc8gb/1/

HTML：

<div class="checkbox-container">
  <div id="one">
    <input type="checkbox" id="chk1" />
    <label for="chk1">Checkbox 1</label>
  </div>
  <div id="two">
    <input type="checkbox" id="chk2" checked />
    <label for="chk2">Checkbox 2</label>
  </div>
  <div class="msg "></div>
</div>

<div class="checkbox-container">
  <div id="three">
    <input type="checkbox" id="chk3" checked />
    <label for="chk3">Checkbox 3</label>
  </div>
  <div id="four">
    <input type="checkbox" id="chk4">
    <label for="chk4">Checkbox 4</label>
  </div>
  <div class="msg"></div>
</div>

<div class="checkbox-container">
  <div id="five">
    <input type="checkbox" id="chk5" />
    <label for="chk5">Checkbox 5</label>
  </div>
  <div id="six">
    <input type="checkbox" id="chk6" />
    <label for="chk6">Checkbox 6</label>
  </div>
  <div class="msg"></div>
</div>

jQuery:

function chk() {
  $(".msg").empty();
  $("input:checked").each(function() {
    var isChecked = $(this).siblings("label").text();
    $(this).parents(".checkbox-container").find(".msg").append(isChecked);
  });
};

//run the chk function on page load
$(function() {
    chk();
 });

// run the chk function on click of any checkbox
$("input").on("click", function() {
    chk();
});