将表<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>

Answer 2

当您按下mousedown时，我们切换一个布尔值以指示鼠标已按下。将鼠标悬停在TD上时，我们检查鼠标是否按下，然后再检查它。我们阻止鼠标按下时的默认行为，以避免选择文本。

$(document).ready(function() {
	
  // one click
  $('td').on( 'click', function(){
    var $checkbox =  $(this).find('input:checkbox')
    $checkbox.click()
     if ( $checkbox[0].checked ) {
       $checkbox.parent().css("background-color", "red");
     } else {
       $checkbox.parent().css("background-color", "white");
     }
  })

  var mouseDown = false;
  $('td').on('mousedown touchstart', function(event) {
  
    // Disable text selection
    event.preventDefault();
    
    // set boolean
    mouseDown = true;
  });
  $(window.document).on('mouseup touchend', function(event) {
	  mouseDown = false;
	});
  
    $('td').on('mouseover', function(event) {
    	if (mouseDown) {
	      var $checkbox =  $(this).find('input:checkbox')
  	    if ( !$checkbox[0].checked ) {
        	$checkbox.click()
       	}
      }
    });
});

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>