Javascript 有桌子<；td>；作为复选框，如何在<；td>；

我确实有一个代码，当单击

时，它会更改复选框状态

$（文档）.ready（函数（）{
$（“td”）。单击（功能（e）{
var chk=$（this.closest（“td”）.find（“输入：复选框”）.get（0）；
如果（例如，目标！=chk）{
chk.checked=！chk.checked；
if（$（this）.closest（“td”）.find（“输入：复选框”）.prop（“选中”）==true）{
$（此）.td.css（“背景色”、“红色”）；
console.log（$（this.closest（“td”）.find（“输入：复选框”）.prop（“选中”）；
console.log（$（this.closest（“td”）.find（“输入：复选框”）.prop（“值”））；
}否则{
$（此）.td.css（“背景色”、“白色”）；
console.log（$（this）.closest（“label”）.find（“输入：复选框”）.prop（“选中”）；
console.log（$（this）.closest（“标签”）.find（“输入：复选框”）.prop（“值”）；
}
}
});
});
表格，
th，
运输署{
边框：1px纯黑；
}
输入[type=“checkbox”]{
/*显示：无*/
}
运输署输入：在{
背景色：红色；
}

时间\日期
星期一
星期二
星期三
星期四
星期五
星期六
星期日
07:30-08:00
A1
地下一层
C1
D1
E1
一层楼
G1
08:00-08:30
A2
地下二层
C2
D2
E2
地上二层
G2
08:30-09:00
A3
地下三层
C3
D3
E3
F3
G3
您的参考资料非常有用，希望我的代码片段能在任何方面对您有所帮助。。祝你今天愉快：）


$（文档）.ready（函数（）{
var isMouseDown=false，
石灯；
$（“#示例输入：复选框”）。单击（函数（）{
返回false；
})
$（“#样本td:非（：第一个孩子）”）
.mousedown（函数（）{
isMouseDown=真；
$（this.toggleClass（“突出显示”）；
isHighlighted=$（this）.hasClass（“突出显示”）；
$（this）.find（“输入：复选框”）.prop（“选中”，ishighlight）；
返回false；//防止文本选择
})
.mouseover（函数（）{
如果（isMouseDown）{
$（this.toggleClass（“突出显示”，ishighlight）；
$（this）.find（“输入：复选框”）.prop（“选中”，ishighlight）；
}
})
.bind（“选择开始”，函数（）{
返回false；
})
$（文件）
.mouseup（函数（）{
isMouseDown=错误；
});
});
表格，
th，
运输署{
边框：1px纯黑；
}
https://stackoverflow.com/questions/58418830/having-table-td-as-checkbox-how-to-implement-click-and-drag-multiple-selectio#
输入[type=“checkbox”]{
/*显示：无*/
}
运输署输入：在{
背景色：红色；
}
表td.1{
背景色：#999；
}

时间\日期
星期一
星期二
星期三
星期四
星期五
星期六
星期日
07:30-08:00
A1
地下一层
C1
D1
E1
一层楼
G1
08:00-08:30
A2
地下二层
C2
D2
E2
地上二层
G2
08:30-09:00
A3
地下三层
C3
D3
E3
F3
G3
当您按下鼠标向下键时，我们会切换一个布尔值，以指示鼠标已按下。在TD上的鼠标上，我们检查鼠标是否已按下，然后检查它。我们防止鼠标向下的默认行为，以避免文本选择


$（文档）.ready（函数（）{
//一键
$（'td'）。在（'click'，function（）上）{
var$checkbox=$（this.find（'input:checkbox'））
$checkbox.单击（）
如果（$checkbox[0]。选中）{
$checkbox.parent（）.css（“背景色”、“红色”）；
}否则{
$checkbox.parent（）.css（“背景色”、“白色”）；
}
})
var mouseDown=false；
$（'td'）。在（'mousedown touchstart'，函数（事件）上{
//禁用文本选择
event.preventDefault（）；
//集合布尔
mouseDown=true；
});
$（window.document）.on（'mouseup touchend'，函数（事件）{
mouseDown=false；
});
$（'td'）。on（'mouseover'，函数（事件）{
如果（鼠标向下）{
var$checkbox=$（this.find（'input:checkbox'））
如果（！$checkbox[0]。已选中）{
$checkbox.单击（）
}
}
});
});
表格，
th，
运输署{
边框：1px纯黑；
}
输入[type=“checkbox”]{
/*显示：无*/
}
运输署输入：在{
背景色：红色；
}

时间\日期
星期一
星期二
星期三
星期四
星期五
星期六
星期日
07:30-08:00
A1
地下一层
C1
D1
E1
一层楼
G1
08:00-08:30
A2
地下二层
C2
D2
E2
地上二层
G2
08:30-09:00
A3
地下三层
C3
D3
E3
F3
G3
是否要创建多个可能重叠或不重叠的选择组？我将合并这两个选择组。我可以同时单击每个<代码> <代码>或单击并拖动多个<代码> <代码>检查/取消检查，而不是使用TD为您的事件，考虑将每个标签的大小更改为TD的大小。单击标签将自动更改关联复选框的状态。也许在拖动选择时可以尝试这种方法，但该实现的问题是，如果需要附加选择，则活动选择不会保持不变。@kkshinichi您的意思是这样的吗？添加了另一个基于开始和结束TD的多选择版本。希望它能帮助您找到正确的解决方案。