基本上是可用性计划日历。 七个复选框具有相同的类。然后其他七个盒子具有相同的类别。共有49个复选框和7个类。所以我希望这些复选框的行为类似于单选按钮。即，一次不能检查同一类的两个复选框。例如，如果有人用“earlyMorning”类检查该框。当他检查具有相同类的另一个复选框时，应取消选中第一个复选框。这是我的HTML。现在只写了21个复选框。
<table> <tr>
<th>Early Morning<br /><small>6am-9am</small></th>
<td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_871_0" value="Early Morning 6am-9am Monday" style="display: none;"></td>
<td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_872_1" value="Early Morning 6am-9am Tuesday" style="display: none;"></td>
<td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_873_2" value="Early Morning 6am-9am Wednesday" style="display: none;"></td>
<td><input type="checkbox" class="lateAfternoon" name="field_807[]" id="field_874_3" value="Early Morning 6am-9am Thursday" style="display: none;"></th>
<td><input type="checkbox" class="earlyEvening" name="field_807[]" id="field_875_4" value="Early Morning 6am-9am Friday" style="display: none;"></td>
<td><input type="checkbox" class="lateEvening" name="field_807[]" id="field_876_5" value="Early Morning 6am-9am Saturday" style="display: none;"></td>
<td><input type="checkbox" class="overnight" name="field_807[]" id="field_877_6" value="Overnight 12am-6am Sunday" style="display: none;"></td>
</tr>
<tr>
<th>Late Morning<br /><small>9am-12pm</small></th>
<td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_878_7" value="Late Morning 9am-12pm Monday" style="display: none;"></td>
<td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_879_8" value="Late Morning 9am-12pm Tuesday" style="display: none;"></td>
<td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_880_9" value="Late Morning 9am-12pm Wednesday" style="display: none;"></td>
<td><input type="checkbox" class="lateAfternoon" name="field_807[]" id="field_881_10" value="Late Morning 9am-12pm Thursday" style="display: none;"></th>
<td><input type="checkbox" class="earlyEvening" name="field_807[]" id="field_882_11" value="Late Morning 9am-12pm Friday" style="display: none;"></td>
<td><input type="checkbox" class="lateEvening" name="field_807[]" id="field_883_12" value="Late Morning 9am-12pm Saturday" style="display: none;"></td>
<td><input type="checkbox" class="overnight" name="field_807[]" id="field_884_13" value="Overnight 12am-6am Sunday" style="display: none;"></td>
</tr>
<tr>
<th>Early Afternoon<br /><small>12pm-3pm</small></th>
<td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_885_14" value="Early Afternoon 12pm-3pm Monday" style="display: none;"></td>
<td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_886_15" value="Early Afternoon 12pm-3pm Tuesday" style="display: none;"></td>
<td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_887_16" value="Early Afternoon 12pm-3pm Wednesday" style="display: none;"></td>
<td><input type="checkbox" class="lateAfternoon" name="field_807[]" id="field_888_17" value="Early Afternoon 12pm-3pm Thursday" style="display: none;"></th>
<td><input type="checkbox" class="earlyEvening" name="field_807[]" id="field_889_18" value="Early Afternoon 12pm-3pm Friday" style="display: none;"></td>
<td><input type="checkbox" class="lateEvening" name="field_807[]" id="field_890_19" value="Early Afternoon 12pm-3pm Saturday" style="display: none;"></td>
<td><input type="checkbox" class="overnight" name="field_807[]" id="field_891_20" value="Overnight 12am-6am Sunday" style="display: none;"></td>
</tr></table>
我在这里找到了一个很好的例子，但它在我的情况下不起作用。 make checkbox behave like radio buttons with javascript
基于上面的教程，我尝试了这个但没有工作
$(".earlyMorning").each(function()
{
$(this).change(function()
{
$(".earlyMorning").prop('checked',false);
$(this).prop('checked',true);
});
});
答案 0 :(得分：3)
我使用jQuery的解决方案：
$(document).ready(function() {
$('input').click(function() {
var input_class = $(this).attr('class');
$('.'+input_class).prop('checked', false);
$(this).prop('checked', true);
});
});
每次单击复选框时，在检查单击元素之前，都会取消选中具有相同类的所有复选框。
我希望这会有所帮助。
答案 1 :(得分：1)
例如：
function Selection(elem)
{
var elems = document.getElementsByTagName("input");
var currentState = elem.checked;
var elemsLength = elems.length;
for(i=0; i<elemsLength; i++)
{
if(elems[i].type === "checkbox")
{
elems[i].checked = false;
}
}
elem.checked = currentState;
}
<input type="checkbox" class="chkclass" onclick="Selection(this);" />
<input type="checkbox" class="chkclass" onclick="Selection(this);" />
<input type="checkbox" class="chkclass" onclick="Selection(this);" />
<input type="checkbox" class="chkclass" onclick="Selection(this);" />
那你在这做什么：
单击一个元素时，您只需取消选中其他元素。像这样，一次只能激活一个复选框，它们的行为类似于单选按钮。
答案 2 :(得分：1)
你的班级名字有点错位，看看这个小提琴：http://jsfiddle.net/44Zfv/345/
这可能是一种更简洁的方法，而不是每个类名的函数，但因为我不知道你的HTML是如何导致我无法附加函数。
你的类名应该是这样的：
<table>
<tr>
<th>Early Morning<br /><small>6am-9am</small></th>
<td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_871_0" value="Early Morning 6am-9am Monday"></td>
<td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_872_1" value="Early Morning 6am-9am Tuesday"></td>
<td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_873_2" value="Early Morning 6am-9am Wednesday"></td>
<td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_874_3" value="Early Morning 6am-9am Thursday"></th>
<td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_875_4" value="Early Morning 6am-9am Friday"></td>
<td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_876_5" value="Early Morning 6am-9am Saturday"></td>
<td><input type="checkbox" class="earlyMorning" name="field_807[]" id="field_877_6" value="Overnight 12am-6am Sunday"></td>
</tr>
<tr>
<th>Late Morning<br /><small>9am-12pm</small></th>
<td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_878_7" value="Late Morning 9am-12pm Monday"></td>
<td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_879_8" value="Late Morning 9am-12pm Tuesday"></td>
<td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_880_9" value="Late Morning 9am-12pm Wednesday"></td>
<td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_881_10" value="Late Morning 9am-12pm Thursday"></th>
<td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_882_11" value="Late Morning 9am-12pm Friday"></td>
<td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_883_12" value="Late Morning 9am-12pm Saturday"></td>
<td><input type="checkbox" class="lateMorning" name="field_807[]" id="field_884_13" value="Overnight 12am-6am Sunday"></td>
</tr>
<tr>
<th>Early Afternoon<br /><small>12pm-3pm</small></th>
<td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_885_14" value="Early Afternoon 12pm-3pm Monday"></td>
<td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_886_15" value="Early Afternoon 12pm-3pm Tuesday"></td>
<td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_887_16" value="Early Afternoon 12pm-3pm Wednesday"></td>
<td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_888_17" value="Early Afternoon 12pm-3pm Thursday"></th>
<td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_889_18" value="Early Afternoon 12pm-3pm Friday"></td>
<td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_890_19" value="Early Afternoon 12pm-3pm Saturday"></td>
<td><input type="checkbox" class="earlyAfternoon" name="field_807[]" id="field_891_20" value="Overnight 12am-6am Sunday"></td>
</tr>
</table>
答案 3 :(得分：1)
由于每组复选框都在同一个表行中，因此您可以使用一个脚本来管理所有组：
$("table").on("click", 'input[type="checkbox"]', function () {
$(this).change(function() {
// Up to TR, uncheck all the checkboxes in this row and check the one that was clicked
$(this).parent().parent().find('input[type="checkbox"]').prop('checked',false);
$(this).prop('checked',true);
});
});
答案 4 :(得分：1)
这是一个纯粹的js解决方案，虽然我必须同意Svenskunganka，但是你的类名在表头方面没有意义。
以下内容适用于所有现代浏览器，而某些旧版本较旧，但要在旧版本的Internet Explorer中使用此功能，您需要对addEventListener进行填充，或实施条件以使用attachEvent代替。
有关详细信息，请查看此StackOverflow质量检查，或搜索Google：
Firefox attachEvent and addEventListener issues with both
显然应该注意以下代码仅在页面加载后对输入进行分组。如果您希望更快地做出反应 - 即在DOM准备就绪后触发，或者您希望代码使用AJAXed内容，我建议使用像jQuery这样的库，并为您的事件监听器使用.on()委托方法。 / p>
window.addEventListener('load', function(){
var inps = document.getElementsByTagName('input'), inp;
var i, l = inps.length, c, groups = {};
/// react to a particular class-named group of inputs
var react = function(e){
var inp = e.target, group = groups[inp.className], i, l, otherinp;
if ( group ) {
for ( i=0, l=group.length; i<l; i++ ) {
otherinp = group[i];
if ( inp !== otherinp ) {
otherinp.checked = false;
}
}
}
};
/// group inputs based on className
for ( var i=0; i<l; i++ ) {
if ( (inp = inps[i]) && inp.type == 'checkbox' ) {
switch( (c = inp.className) ) {
case 'earlyMorning':
case 'lateMorning':
case 'earlyAfternoon':
case 'lateAfternoon':
case 'earlyEvening':
case 'lateEvening':
case 'overnight':
!groups[c] && (groups[c] = []);
groups[c].push(inp);
inp.addEventListener('change', react);
break;
}
}
}
});
答案 5 :(得分：1)
我会提出另一种不依赖于javascript的方法。
<edit>我没有注意到@pebbl的评论，该类用作组名。为了使此表单按预期工作，类属性值应替换并移动到name属性value。在服务器端，将例程更新为获取输入无线电值的常规方法。
DEMO with name attributes updated to your needs
这些只是建议。 </edit>
DEMO 或者您可以单独下载html＆amp; css文件 here
首先，使用te无线电输入，它们是为你想做的而制作的，而不依赖于javascript来提高效率。
然后，使用CSS为年轻浏览器设置可用的复选框样式。
要确保旧版浏览器不隐藏您的表单元素，请使用高级选择器。
为了能够制作CSS checbox，你需要为你想要看到的每个输入添加一些额外的标记，一个中性的内联元素。
准备HTML：
转 <td><input type="radio"/></td>
进入 <td><input type="radio"/><span></span></td>
对于css部分。
您可以使用选择器（与类，ID，数据属性相结合或使用任何其他高级选择器）：
[type="radio"] [type="radio"]+ [type="radio"]:checked + [type="radio"]+span::before。
较旧的浏览器不会设置任何样式。
DEMO 或者您可以单独下载html＆amp; css文件 here
如果您的页面缺少javaScript / jQuery或CSS表格，那么您的公式将仍然高效且可用。我猜这是最重要的。
您可以将无线电输入和CSS生成的框视为彼此的后备。