将表格<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>TimeDate</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>上实现单击和拖动，这也将选中复选框。我确实看到了这个实现，但我仍然无法使用我现有的代码进行这项工作。

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>TimeDate</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

当您按下鼠标按下时，我们会切换一个布尔值以指示鼠标已打开。将鼠标悬停在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>TimeDate</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>