jQuery设置复选框选中

我已经尝试了所有可能的方法，但还是没有成功。 我有一个模式窗口，checkbox我想当模式打开时，checkbox检查或取消检查应该基于数据库值。(我已经与其他领域的人合作过了。)我开始尝试检查它，但它没有工作

我的HTML div:

<div id="fModal" class="modal" >
...
<div class="row-form">
<div class="span12">
<span class="top title">Estado</span>


<input type="checkbox"  id="estado_cat" class="ibtn">
</div>
</div>
</div>

和jQuery:

$("#estado_cat").prop( "checked", true );
我也尝试了attr，和其他在论坛上看到的，但似乎没有工作。< br / > 谁能告诉我怎么走?< / p >

编辑

好吧，我真的遗漏了一些东西。如果复选框在页面中，我可以检查/取消检查使用代码，但它在模态窗口中，我不能。我尝试了几十种不同的方法。

我有一个链接，应该打开模式:

<a href='#' data-id='".$row['id_cat']."' class='editButton icon-pencil'></a>

jQuery "监听"点击并执行一些操作，比如用来自数据库的数据填充一些文本框。一切都像我想要的那样工作，但问题是我不能设置复选框选中/未选中使用代码。请帮助!

$(function () {
$(".editButton").click(function () {
var id = $(this).data('id');
$.ajax({
type: "POST",
url: "process.php",
dataType: "json",
data: {
id: id,
op: "edit"
},
}).done(function (data) {
// The next two lines work fine,
// i.e. it grabs the value from database and fills the textboxes
$("#nome_categoria").val(data['nome_categoria']);
$("#descricao_categoria").val(data['descricao_categoria']);


// Then I tried to set the checkbox checked (because it's unchecked by default)
// and it does not work
$("#estado_cat").prop("checked", true);
$('#fModal').modal('show');
});


evt.preventDefault();
return false;
});
});
1220080 次浏览
小开

试试下面的代码:

$("div.row-form input[type='checkbox']").attr('checked','checked')

或

$("div.row-form #estado_cat").attr("checked","checked");

或

$("div.row-form #estado_cat").attr("checked",true);
小开

尝试这个，因为你正在使用jQuery UI可能(如果不是请评论)

 $("#fModal" ).dialog({
open: function( event, ui ) {


if(//some hidden value check which stores the DB value==expected value for
checking the Checkbox)


$("div.row-form input[type='checkbox']").attr('checked','checked');


}
});
小开

因为你是在一个模态窗口(无论是动态的还是在页面中)，你可以使用以下代码来实现你的目标:(我在我的网站上遇到了同样的问题，这是我如何修复它)

HTML:

<div class="content-container" style="text-align: right;">
<input type="checkbox" id="QueryGroupCopyQueries">
<label for="QueryGroupCopyQueries">Create Copies</label>
</div>

代码:

$.each(queriesToAddToGroup, function (index, query) {
if (query.groupAddType === queriesGroupAddType.COPY) {


// USE FIND against your dynamic window and PROP to set the value
// if you are using JQUERY 1.6 or higher.
$(kendoWindow).find("input#QueryGroupCopyQueries").prop("checked", true);


return;
}

在上面的“kendoWindow”是我的窗口(我的是动态的，但我也这样做时，追加到一个元素直接在页面)。我正在遍历一个数据数组(“queriesToAddToGroup”)，以查看是否有任何行具有COPY属性。如果是这样，我想打开窗口内的复选框，当用户从该窗口保存时设置该属性。

小开

你可以像下面这样写给定的代码。

超文本标记语言

<input type="checkbox"  id="estado_cat" class="ibtn">

jQuery

$(document).ready(function(){
$(".ibtn").click(function(){
$(".ibtn").attr("checked", "checked");
});
});

希望它对你有用。

小开

你试过在你的复选框上运行$("#estado_cat").checkboxradio("refresh")吗?

小开 
$("#divParentClip").find("#subclip_checkbox")[0].checked=true;

Find将返回数组，因此即使只有一项，也使用[0]来获取

如果你不使用find，那么

$("#subclip_checkbox").checked=true;

这对我来说在Mozilla Firefox中工作得很好

小开

你必须使用'prop'函数:

.prop('checked', true);

jQuery 1.6之前(见user2063626的回答):

.attr('checked','checked')
小开

这个作品。

 $("div.row-form input[type='checkbox']").attr('checked','checked');
小开

这是因为你使用jquery的最新版本attr('checked')返回'checked'，而prop('checked')返回true。

小开

对我有用:

$checkbok.prop({checked: true});
小开

我也遇到过这个问题。

这是我以前的不工作代码

if(data.access == 'private'){
Jbookaccess.removeProp("checked") ;
//I also have tried : Jbookaccess.removeAttr("checked") ;
}else{
Jbookaccess.prop("checked", true)
}

这是我现在工作的新代码:

if(data.access == 'private'){
Jbookaccess.prop("checked",false) ;
}else{
Jbookaccess.prop("checked", true)
}

因此，关键的一点是，在它工作之前，确保checked属性确实存在，并且没有被删除。

小开

在加载模态窗口后设置复选框。我认为您在加载页面之前设置了复选框。

$('#fModal').modal('show');
$("#estado_cat").attr("checked","checked");
小开

采用所有建议的答案并将它们应用到我的情况中——尝试根据检索值为true(应该选中复选框)或false(不应该选中复选框)来选中或取消选中复选框——我尝试了以上所有方法，发现使用.prop(“检查”,真的)和.prop(“检查”,假的)是正确的解决方案。

我还不能添加评论或回答，但我觉得这很重要，应该加入到对话中。

下面是修改fullcalendar的手工代码，它表示如果检索到的值“allDay”为真，则选中ID为“even_allday_yn”的复选框:

if (allDay)
{
$( "#even_allday_yn").prop('checked', true);
}
else
{
$( "#even_allday_yn").prop('checked', false);
}
小开 
.attr("checked",true)
.attr("checked",false)

将工作。确保true和false不在引号内。

小开

“checked”属性在复选框存在时立即“勾选”复选框。因此，要选中/取消选中复选框，您必须设置/取消设置属性。

检查方框:

$('#myCheckbox').attr('checked', 'checked');

取消勾选方框:

$('#myCheckbox').removeAttr('checked');

用于测试已检查状态:

if ($('#myCheckbox').is(':checked'))

希望能有所帮助……

小开

如果您希望在GreaseMonkey脚本中使用此功能来自动选中页面上的复选框，请记住，简单地设置选中的属性可能不会触发相关的操作。在这种情况下，“点击”复选框可能会(以及设置选中的属性)。

$("#id").click()
小开

我知道这要求一个Jquery的解决方案，但我只是想指出，这是非常容易切换这在纯javascript。

var element = document.getElementById("estado_cat");
element.checked = true;

它将在当前和未来的所有版本中工作。

小开 
<body>
<input id="IsActive" name="IsActive" type="checkbox" value="false">
</body>


<script>
$('#IsActive').change(function () {
var chk = $("#IsActive")
var IsChecked = chk[0].checked
if (IsChecked) {
chk.attr('checked', 'checked')
}
else {
chk.removeAttr('checked')
}
chk.attr('value', IsChecked)
});
</script>
小开 
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" name="quiz_answer" id="customSwitch0">
<label class="custom-control-label" for="customSwitch0"><span class="fa fa-minus fa-lg mt-1"></span></label>
</div>

记住分别增加id和for属性。“动态添加引导”复选框。

$(document).on('change', '.custom-switch', function(){
let parent = $(this);
parent.find('.custom-control-label > span').remove();
let current_toggle = parent.find('.custom-control-input').attr('id');
if($('#'+current_toggle+'').prop("checked") == true){
parent.find('.custom-control-label').append('<span class="fa fa-check fa-lg mt-1"></span>');
}
else if($('#'+current_toggle+'').prop("checked") == false){
parent.find('.custom-control-label').append('<span class="fa fa-minus fa-lg mt-1"></span>');
}
})

提交答案