javascript - 将表格<td>作为复选框，如何在<td>上实现点击和拖动多选

Question

我确实有一个代码可以在 <td> 时更改复选框状态被点击

$(document).ready(function() {
  $("td").click(function(e) {
    var chk = $(this).closest("td").find("input:checkbox").get(0);
    if (e.target != chk) {
      chk.checked = !chk.checked;
      if ($(this).closest("td").find("input:checkbox").prop("checked") == true) {
        $(this).closest("td").css("background-color", "red");
        console.log($(this).closest("td").find("input:checkbox").prop("checked"));
        console.log($(this).closest("td").find("input:checkbox").prop("value"));
      } else {
        $(this).closest("td").css("background-color", "white");
        console.log($(this).closest("label").find("input:checkbox").prop("checked"));
        console.log($(this).closest("label").find("input:checkbox").prop("value"));
      }
    }
  });


});

table,
th,
td {
  border: 1px solid black;
}

input[type="checkbox"] {
  /* display:none; */
}

td input:after {
  background-color: red;
}

<div class="table">
  <!-- <form method="POST"> -->
  <table id='sample'>
    <tr>
      <th>Time\Date</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
    </tr>
    <tr>
      <td>07:30-08:00</td>
      <td><input name="checkbox" value="A1" type="checkbox">A1</td>
      <td><input name="checkbox" value="B1" type="checkbox">B1</td>
      <td><input name="checkbox" value="C1" type="checkbox">C1</td>
      <td><input name="checkbox" value="D1" type="checkbox">D1</td>
      <td><input name="checkbox" value="E1" type="checkbox">E1</td>
      <td><input name="checkbox" value="F1" type="checkbox">F1</td>
      <td><input name="checkbox" value="G1" type="checkbox">G1</td>
    </tr>
    <tr>
      <td>08:00-08:30</td>
      <td><input name="checkbox" value="A2" type="checkbox">A2</td>
      <td><input name="checkbox" value="B2" type="checkbox">B2</td>
      <td><input name="checkbox" value="C2" type="checkbox">C2</td>
      <td><input name="checkbox" value="D2" type="checkbox">D2</td>
      <td><input name="checkbox" value="E2" type="checkbox">E2</td>
      <td><input name="checkbox" value="F2" type="checkbox">F2</td>
      <td><input name="checkbox" value="G2" type="checkbox">G2</td>
    </tr>
    <tr>
      <td>08:30-09:00</td>
      <td><input name="checkbox" value="A3" type="checkbox">A3</td>
      <td><input name="checkbox" value="B3" type="checkbox">B3</td>
      <td><input name="checkbox" value="C3" type="checkbox">C3</td>
      <td><input name="checkbox" value="D3" type="checkbox">D3</td>
      <td><input name="checkbox" value="E3" type="checkbox">E3</td>
      <td><input name="checkbox" value="F3" type="checkbox">F3</td>
      <td><input name="checkbox" value="G3" type="checkbox">G3</td>
    </tr>
  </table>
  <!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我需要在多个 <td> 上实现点击和拖动这也将检查复选框。我确实看到了这个implementation , 但我仍然无法使用我现有的代码来完成这项工作。

Answer 1

您的引用非常有帮助，希望我的代码片段能以任何方式帮助您..祝您有愉快的一天:)

$(document).ready(function() {
  var isMouseDown = false,
    isHighlighted;

  $("#sample input:checkbox").click(function() {
    return false;
  })
  $("#sample td:not(:first-child)")
    .mousedown(function() {
      isMouseDown = true;
      $(this).toggleClass("highlighted");
      isHighlighted = $(this).hasClass("highlighted");
      $(this).find("input:checkbox").prop("checked", isHighlighted);
      return false; // prevent text selection
    })
    .mouseover(function() {
      if (isMouseDown) {
        $(this).toggleClass("highlighted", isHighlighted);
        $(this).find("input:checkbox").prop("checked", isHighlighted);
      }
    })
    .bind("selectstart", function() {
      return false;
    })

  $(document)
    .mouseup(function() {
      isMouseDown = false;
    });
});

table,
th,
td {
  border: 1px solid black;
}

https: //stackoverflow.com/questions/58418830/having-table-td-as-checkbox-how-to-implement-click-and-drag-multiple-selectio#
input[type="checkbox"] {
  /* display:none; */
}

td input:after {
  background-color: red;
}

table td.highlighted {
  background-color: #999;
}

<div class="table">
  <!-- <form method="POST"> -->
  <table id='sample'>
    <tr>
      <th>Time\Date</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
    </tr>
    <tr>
      <td>07:30-08:00</td>
      <td><input name="checkbox" value="A1" type="checkbox">A1</td>
      <td><input name="checkbox" value="B1" type="checkbox">B1</td>
      <td><input name="checkbox" value="C1" type="checkbox">C1</td>
      <td><input name="checkbox" value="D1" type="checkbox">D1</td>
      <td><input name="checkbox" value="E1" type="checkbox">E1</td>
      <td><input name="checkbox" value="F1" type="checkbox">F1</td>
      <td><input name="checkbox" value="G1" type="checkbox">G1</td>
    </tr>
    <tr>
      <td>08:00-08:30</td>
      <td><input name="checkbox" value="A2" type="checkbox">A2</td>
      <td><input name="checkbox" value="B2" type="checkbox">B2</td>
      <td><input name="checkbox" value="C2" type="checkbox">C2</td>
      <td><input name="checkbox" value="D2" type="checkbox">D2</td>
      <td><input name="checkbox" value="E2" type="checkbox">E2</td>
      <td><input name="checkbox" value="F2" type="checkbox">F2</td>
      <td><input name="checkbox" value="G2" type="checkbox">G2</td>
    </tr>
    <tr>
      <td>08:30-09:00</td>
      <td><input name="checkbox" value="A3" type="checkbox">A3</td>
      <td><input name="checkbox" value="B3" type="checkbox">B3</td>
      <td><input name="checkbox" value="C3" type="checkbox">C3</td>
      <td><input name="checkbox" value="D3" type="checkbox">D3</td>
      <td><input name="checkbox" value="E3" type="checkbox">E3</td>
      <td><input name="checkbox" value="F3" type="checkbox">F3</td>
      <td><input name="checkbox" value="G3" type="checkbox">G3</td>
    </tr>
  </table>
  <!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>