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();
});

当选中其中一个复选框（对）时，我必须在复选框（每个记录/行）中的div中显示/隐藏邮件

1 个答案: