如何使用jquery将复选框更改为类似单选按钮的行为
How to change checkboxes to behave like radio button using jquery?
基本上是一个可用性时间表日历。七个复选框具有相同的类。然后其他七个盒子有相同的类别。共有49个复选框和7个类。所以我希望这些复选框的行为像单选按钮。即同一类别的两个复选框不能同时选中。例如，如果有人勾选了class为"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>
我在这里找到了一个很好的例子，但对我来说不起作用。使用javascript 使复选框的行为类似于单选按钮
基于上面的教程，我尝试了这个，但没有工作
$(".earlyMorning").each(function()
{
$(this).change(function()
{
$(".earlyMorning").prop('checked',false);
$(this).prop('checked',true);
});
});
我使用jQuery的解决方案：
$(document).ready(function() {
$('input').click(function() {
var input_class = $(this).attr('class');
$('.'+input_class).prop('checked', false);
$(this).prop('checked', true);
});
});
每次单击复选框时，同一类的所有复选框都会在选中单击的元素之前取消选中。
我希望这能有所帮助。
例如：
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);" />
那么你在这里做什么：
当单击一个元素时，您总是取消选中其他元素。像这样，一次只能激活一个复选框，它们的行为就像单选按钮。
你的类名有点错位，看看这个小提琴：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>
由于每组复选框都在同一个表行中，因此可以使用一个脚本来管理所有组：
http://jsfiddle.net/ukmhW/
$("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);
});
});
这里是一个纯js解决方案，尽管我不得不同意Svenskunka的观点，但您的类名对您的表头来说没有意义。
http://jsfiddle.net/nE75S/
以下内容适用于所有现代浏览器，也适用于一些旧版本的浏览器，但要在旧版本的Internet Explorer中实现此功能，您需要为addEventListener使用polyfill，或者实现使用attachEvent的条件。
有关更多信息，请查看此StackOverflow QA，或搜索谷歌：
Firefox attachEvent和addEventListener与都存在问题
显然，应该注意的是，下面的代码只对页面加载后的输入进行分组。如果您希望有更快的反应—即在DOM就绪后触发，或者您希望代码使用AJAX内容，我建议您使用像jQuery这样的库，并为事件侦听器使用.on()委派方法。
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;
}
}
}
});
我会提出另一种不依赖javascript的方法。
<edit>在评论@pebble之前我没有注意到，那个类被用作组名。为了保持此表单按预期工作，类属性value应该替换并移动到name属性value。在服务器端，将例程更新为获取输入无线电值的常规方式。DEMO根据您的需求更新名称属性
这些只是建议。</edit>
DEMO或者您可以下载独立的html&css文件此处
首先，一定要使用te单选输入，它们是为你想做的事情而制作的，表单不会依赖javascript来高效。
然后，使用CSS为年轻的浏览器设计一个可用的复选框。
若要确保旧浏览器不会隐藏表单元素，请使用高级选择器。
为了能够制作CSS复选框，您需要添加一些额外的标记，即为您希望看到替换的每个输入添加一个中性的内联元素。
准备HTML:
转弯<td><input type="radio"/></td>
进入<td><input type="radio"/><span></span></td>
对于css部分。
您可以使用这些选择器（与类、id、数据属性组合或使用任何其他高级选择器）:
[type="radio"][type="radio"]+[type="radio"]:checked +-
CCD_ 11。
较旧的浏览器不会设置任何样式。
DEMO或者您可以下载独立的html&css文件此处
有什么意义
如果您的页面缺少javaScript/jQuery或CSS表，那么您的公式仍然是高效可用的。我想这才是最重要的。
您可以将无线电输入和CSS生成的框视为彼此的回退。
相关文章：
- 是否可以禁用jquery中的单个单选按钮
- 当选择组中的单选按钮时，jQuery addClass
- Jquery-标识单选按钮值是否未更改
- 如何使用jQuery从DOM中删除所有单选按钮元素
- MVC和JQuery Mobile:单选按钮在发布时释放状态
- 单选按钮的验证(启用）&使用Jquery Optimization从复选框中选择submit按钮
- jQuery Validate不适用于自定义单选按钮
- Jquery-删除单选按钮
- 验证动态单选按钮jQuery
- 如何在jQuery中获取单选按钮组的值
- Javascript/Jquery将选择列表更改为单选按钮
- jquery使2组单选按钮相互镜像
- 如果使用jQuery验证器插件找到单选按钮，则将不同的addMethod应用于字段
- jQuery:如何查找id是动态生成的单选按钮是否被选中
- 如何在不使用jQuery的情况下设置数组以获取单选按钮值
- FlatUI - 单选按钮 jQuery 兼容性
- 如何将单选按钮的选定值复制到另一个单选按钮 - jquery
- 默认选中单选按钮- JQuery事件不工作
- 在单选按钮jQuery中传递数组值
- 动态创建单选按钮Jquery
