我尝试创建一个复选框输入表，隐藏实际复选框并替换为可点击标签。因此，我想在点击时更改表格单元格的背景颜色。 （理想情况下，它会直接与复选框状态绑定，但我无法解决这个问题。）
我不知道为什么我的代码无效。
HTML：
<table id="workingSetTable" border="1">
<tr>
<td onclick="togglechecked()" class="checked">
<div>
<input type="checkbox" checked="checked" />
</div>
</td>
</tr>
CSS：
input {
display: none;
}
td {
background-color: red;
width: 100px;
height: 100px;
}
.checked {
background-color: blue;
}
JS：
$(togglechecked() {
$("td").click(togglechecked() {
$(this).toggleClass("checked");
});
});
答案 0 :(得分：1)
在JS小提琴上你没有选择Jquery所以它没有被加载，无论你做什么都不会工作。
您还拥有比您需要的语法更多的语法。要添加点击处理程序，您在html中不需要任何内容。你也不需要命名函数。
https://jsfiddle.net/w45antdo/
这是你需要的所有jquery（除了检查按钮，除非你将其作为表单数据提交到另一个页面，否则你不需要这样做）
$("td").click(function () {
$(this).toggleClass("checked");
});
如果这是jsfiddle以外的其他地方，你也应该告诉它在html完成后加载jquery，通常是通过
$( document ).ready(function() {
console.log( "ready!" );
});
答案 1 :(得分：1)
这是一个快速而肮脏的例子 - 我使用它（带有更多的铃声和口哨）来创建时间表协调事物的开/关班次。这会执行复选框操作，并将数据发送到更新数据库等的后台PHP脚本等。
$('.shifts_clickable td').on('click',function() {
if ($(this).hasClass('registered_active')) {
$(this).removeClass('registered_active').addClass('not_active');
} else {
$(this).removeClass('not_active').addClass('registered_active');
}
})table {
border-collapse: initial;
border-spacing: 0;
margin: 1em auto;
width: 98%;
}
thead, th {
background: $header-background;
color: $header-color;
text-align: center;
font-family: 'open_sans_semibold';
font-size: 1em;
}
td {
border: 0.1em solid #9a9a9a;
color: $hilight-contrast;
font-size: 0.9em;
}
.registered_active {
background-color: green;
}
.not_active {
background-color: rgb(220,160,50);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<table>
<thead>
<tr>
<th></th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th></tr>
</thead>
<tbody><tr class="shifts_clickable">
<td class="shift_1_0_heading center"><b>Shift 0</b></td><td id="bar_1__1__0__1" class=" pointer not_active"></td><td id="bar_1__1__0__2" class=" pointer not_active"></td><td id="bar_1__1__0__3" class=" pointer not_active"></td><td id="bar_1__1__0__4" class=" pointer not_active"></td><td id="bar_1__1__0__5" class=" pointer not_active"></td><td id="bar_1__1__0__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable">
<td class="shift_1_1_heading center"><b>Shift 1</b></td><td id="bar_1__1__1__1" class=" pointer not_active"></td><td id="bar_1__1__1__2" class=" pointer not_active"></td><td id="bar_1__1__1__3" class=" pointer not_active"></td><td id="bar_1__1__1__4" class=" pointer not_active"></td><td id="bar_1__1__1__5" class=" pointer not_active"></td><td id="bar_1__1__1__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable">
<td class="shift_1_2_heading center"><b>Shift 2</b></td><td id="bar_1__1__2__1" class=" pointer not_active"></td><td id="bar_1__1__2__2" class=" pointer not_active"></td><td id="bar_1__1__2__3" class=" pointer not_active"></td><td id="bar_1__1__2__4" class=" pointer not_active"></td><td id="bar_1__1__2__5" class=" pointer not_active"></td><td id="bar_1__1__2__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable">
<td class="shift_1_3_heading center"><b>Shift 3</b></td><td id="bar_1__1__3__1" class=" pointer not_active"></td><td id="bar_1__1__3__2" class=" pointer not_active"></td><td id="bar_1__1__3__3" class=" pointer not_active"></td><td id="bar_1__1__3__4" class=" pointer not_active"></td><td id="bar_1__1__3__5" class=" pointer not_active"></td><td id="bar_1__1__3__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable">
<td class="shift_1_4_heading center"><b>Shift 4</b></td><td id="bar_1__1__4__1" class=" pointer not_active"></td><td id="bar_1__1__4__2" class=" pointer not_active"></td><td id="bar_1__1__4__3" class=" pointer not_active"></td><td id="bar_1__1__4__4" class=" pointer not_active"></td><td id="bar_1__1__4__5" class=" pointer not_active"></td><td id="bar_1__1__4__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable">
<td class="shift_1_5_heading center"><b>Shift 5</b></td><td id="bar_1__1__5__1" class=" pointer not_active"></td><td id="bar_1__1__5__2" class=" pointer not_active"></td><td id="bar_1__1__5__3" class=" pointer not_active"></td><td id="bar_1__1__5__4" class=" pointer not_active"></td><td id="bar_1__1__5__5" class=" pointer not_active"></td><td id="bar_1__1__5__6" class=" pointer not_active"></td></tr><tr class="shifts_clickable">
<td class="shift_1_6_heading center"><b>Shift 6</b></td><td id="bar_1__1__6__1" class=" pointer not_active"></td><td id="bar_1__1__6__2" class=" pointer not_active"></td><td id="bar_1__1__6__3" class=" pointer not_active"></td><td id="bar_1__1__6__4" class=" pointer not_active"></td><td id="bar_1__1__6__5" class=" pointer not_active"></td><td id="bar_1__1__6__6" class=" pointer not_active"></td></tr></tbody>
</table>
<label for="checkallshifts_1" class="button secondary_button center">Check all shifts for Bar 1</label><input id="checkallshifts_1" name="checkallshifts_1" class="button secondary_button ui-corner-all" type="checkbox">
</li>
答案 2 :(得分：0)
https://jsbin.com/teyoziwini/edit?html,css,js,output
上面的小提琴显示了如何使用标签和隐藏的复选框。
请注意，我使用的是visiblity:hidden;而不是display:none;，因为某些浏览器（Safari）不会提交未显示的表单控件。
HTML
<table id="workingSetTable" border="1">
<tbody>
<tr>
<td >
<label class="checked">
<input type="checkbox" checked="checked" />
</label>
</td>
</tr>
</tbody>
</table>
CSS
.checked {
background-color: blue;
}
td label {
display: inline-block;
position: relative;
background-color: red;
width: 100px;
height: 100px;
}
td label.checked {
background-color: blue;
}
td label input {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height:100%;
}
JQuery的
$(document).on('change', 'label input', function(){
var $this = $(this);
$this.closest('label').toggleClass('checked', $this.prop('checked'));
});
答案 3 :(得分：0)
我真的不明白你想要什么。
但我想出了这个小提琴https://jsfiddle.net/avialle/zykc6gz9/6/
$(function() {
$('input').click(function (evt) {
$(evt.target).parent().toggleClass('checked');
});
});table {
border-collapse: collapse;
border-spacing: 0;
}
td {
border:1px solid black;
padding:20px;
background-color:white;
}
td.checked {
background-color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="checked"><input type="checkbox" checked=""></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td class="checked"><input type="checkbox" checked=""></td>
</tr>
</table>
答案 4 :(得分：0)
以下是完全没有javascript的示例。
table td {
border: 1px solid black;
min-width: 5em;
}
table input[type=checkbox] {
display: none;
}
label {
width: 100%;
height: 100%;
display: block;
}
input[type=checkbox]:checked + label {
background: green;
}
<table>
<tr>
<td><input name="input_1_1" id="input_1_1" type="checkbox"><label for="input_1_1"> </label></td>
<td><input name="input_1_2" id="input_1_2" type="checkbox"><label for="input_1_2"> </label></td>
<td><input name="input_1_3" id="input_1_3" type="checkbox"><label for="input_1_3"> </label></td>
</tr>
</table>