JQuery正在更改复选框值,但复选框未显示为已选中
JQuery is changing checkbox value but the checkbox is not displaying as checked
我有一个带有复选框和一些文本的列表(比如电子邮件的收件箱)。当我单击列表项(行)上的任何位置时,我希望选中/取消选中该复选框。我使用了以下代码点击事件的行:
$(this).find(".cbx input").attr('checked', true);
它第一次显示选中的复选框。但当我下次点击选中它时,checkbox checked="checked"的值会在html代码中更新(我通过firebug进行了检查),但复选框不会显示为checked。
使用.attr()
可以设置DOM树中属性的值。根据浏览器、浏览器版本和jQuery版本(尤其是1.6)的不同,这并不总是具有所需的效果。
使用.prop()
,可以操作属性(在本例中为"已检查状态")。我强烈建议在您的情况下使用.prop()
,因此以下内容将正确切换:
$(this).find(".cbx input").prop('checked', true);
有关更多信息,请参阅.pr().的文档
几乎正确,只需使用"checked"而不是true:
$(this).find(".cbx input").attr('checked', 'checked');
更新:或者,您可以将其与更新的JQuery版本一起使用:
$(this).find(".cbx input").prop('checked', true);
简单,解决方案是使用$('xxxxxx').prop('checked',true)或false在Jquery 1.11.x.中测试正常
干杯
完整演示代码示例
示例:(表的代码JavaScript复选框)
function checkswich() {
if ($('#checkbox-select').is(':checked') == true) {
selectTodo();
} else {
deSelectTodo();
}
}
function selectTodo() {
//$('#tabla-data input.ids:checkbox').attr('checked', 'checked');
$('#tabla-data input.ids:checkbox').prop('checked', true);
}
function deSelectTodo() {
//$('#tabla-data input.ids:checkbox').removeAttr('checked', 'checked');
$('#tabla-data input.ids:checkbox').prop('checked', false);
}
function invetirSelectTodo() {
$("#tabla-data input.ids:checkbox").each(function (index) {
//$(this).attr('checked', !$(this).attr('checked'));
$(this).prop('checked', !$(this).is(':checked'));
});
}
示例:(表的代码HTML复选框)
<table id="tabla-data" class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th class="text-center" style="width: 5px"><span class="glyphicon glyphicon-check"></span></th>
<th>Engine</th>
<th><a href="#" class="">Browser</a></th>
<th class="td-actions text-center" style="width: 8%;">Acciones</th>
</tr>
</thead>
<tbody id="tabla-data" class="checkbox-data">
<tr>
<td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td>
<td>#########</td>
<td>#######</td>
<td class="td-actions text-center">
<?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?>
</td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td>
<td>#########</td>
<td>#######</td>
<td class="td-actions text-center">
<?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?>
</td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" class="ids" name="[]id" value=""></td>
<td>#########</td>
<td>#######</td>
<td class="td-actions text-center">
<?= $this->element('table-data-bts',['id'=>1234,'action'=>['view'=>'view', 'edit'=>'edit', 'delete'=>'delete']]) ?>
</td>
</tr>
</tbody>
</table>
示例:(代码组件HTML使用JavaScript)
<form id="form-datos" action="/url/demo/blablaaa" method="post" enctype="multipart/form-data" style="visibility: hidden;" >
<input type="hidden" name="accion" id="accion">
<div class="btn-group">
<span class="btn btn-default btn-xs"><input type="checkbox" id="checkbox-select" onclick="checkswich()"></span>
<button type="button" class="btn btn-default btn-xs dropdown-toggle dropdown-toggle-check" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Options</span>
</button>
<ul class="dropdown-menu">
<li><a href="#" onclick="accion()">Action Demo</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" onclick="selectTodo()">Select All</a></li>
<li><a href="#" onclick="deSelectTodo()">UnSelet All</a></li>
<li><a href="#" onclick="invetirSelectTodo()">Inverse Select</a></li>
</ul>
useing **.prop()** it worked for me !
$(document).on("click",".first-table tr",function(e){
if($(this).find('input:checkbox:first').is(':checked'))
{
$(this).find('input:checkbox:first').prop('checked',false);
}else
{
$(this).find('input:checkbox:first').prop('checked', true);
}
});
尽管在mozilla中运行良好,但最初在chrome中没有任何东西对我有效。后来发现自定义CSS样式导致复选标记不可见。
这个解决方案对我不起作用(即用prop设置检查状态)。
$("#checkbox-reminder").prop("checked", true);
虽然基本状态总是正确更新,但显示不会正确重新绘制。
这可以用来解决。
$("#checkbox-reminder").prop("checked", true).checkboxradio();
$('#checkbox-reminder').checkboxradio('refresh');
有关更多信息,请参阅此线程。
$("[id*='" + value + "'] input").prop('checked', false);
attr
也起作用(但仅为第一次)但prop
总是有效的。
- Bootstrap使用复选框显示和隐藏id
- oncheck复选框显示主干中的数据
- AngularJS过滤器使用ng个重复复选框显示所有页面加载
- 在同一行中为每个复选框显示和隐藏文本字段
- 为每个选中的复选框显示相同的问题集.(PHP和JS/Jquery)
- 我需要有关根据复选框显示和隐藏数据的帮助
- 如何使用复选框显示表单的更多选项并更改表单的操作属性
- 将选中的复选框显示在一个部分中,未选中的复选框显示在另一个部分中
- jQuery / JavaScript 复选框显示多个和单个选择中选中的复选框的数量
- 如何根据选中的复选框显示表行
- 如何为不同的复选框显示不同的下拉列表,然后在选中多个复选框时显示不同的下拉列表
- 让复选框显示某些内容
- 根据复选框显示/隐藏表行
- 根据复选框显示文本框
- 如何使用javascript复选框显示警报消息
- JQuery过滤器复选框显示/隐藏元素
- 正在选中复选框显示名称
- 在Highcharts中使用按钮/复选框显示/隐藏数据的示例
- EXTJS复选框显示为[object object]
- 复选框显示在for循环中,如何在Javascript中获取getElementById