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，以及在论坛中看到的其他人，但似乎都没有用。有人可以指出正确的方法吗？

编辑：好的，我真的在这里遗漏了什么...如果复选框在页面中，我可以使用代码进行检查/取消选中，但是它在模式窗口中，我不能。我尝试了数十种不同的方式...

我有一个应该打开模式的链接：

和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 its unchecked by default) and it does not work
           $("#estado_cat").prop("checked", true);
        $('#fModal').modal('show');
});
    evt.preventDefault();
    return false;
    });     
});

您必须使用'prop'功能：

.prop('checked', true);

在jQuery 1.6之前（请参见user2063626的答案）：

.attr('checked','checked')

采取所有建议的答案并将其应用于我的情况-尝试根据检索到的值为true（应选中该框）或false（不选中该框）来选中或取消选中复选框-我尝试了以上所有方法，并发现使用.prop（“ checked”，true）和.prop（“ checked”，false）是正确的解决方案。

我还不能添加评论或答案，但我觉得这很重要，可以添加到对话中。

这是全日历修改的简化代码，其中说如果检索到的值“ allDay”为true，则选中ID为“ even_allday_yn”的复选框：

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

杜德尝试下面的代码：

$("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);

选中该复选框后，“选中”属性就会“勾选”该复选框。因此，要选中/取消选中复选框，您必须设置/取消设置属性。

对于复选框：

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

取消选中该框：

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

为了测试检查状态：

if ($('#myCheckbox').is(':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属性。如果是这样，当用户从该窗口保存时，我想打开设置该属性的窗口内的复选框。

.attr("checked",true)
.attr("checked",false)

会起作用。请确保在引号中不包含true和false。

您可以像下面的给定代码那样编写。

的HTML

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

jQuery的

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

希望它为您工作。

如果您想对GreaseMonkey脚本使用此功能以自动选中页面上的复选框，请记住，仅设置被选中的属性可能不会触发关联的操作。在这种情况下，“单击”复选框可能会（并同时设置选中的属性）。

$("#id").click()

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

Find将返回array，所以即使只有一项，也要使用[0]来获取

如果您不使用查找则

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

对我来说，这在Mozilla Firefox中效果很好

为我工作：

$checkbok.prop({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');

    }
   });

您是否尝试过$("#estado_cat").checkboxradio("refresh")在复选框上运行？

这可行。

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

我也遇到了这个问题。

这是我的旧的不起作用的代码

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属性确实存在并且未被删除。

这是因为你使用jQuery的最新版本attr('checked')的回报'checked'，而prop('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>

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

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

我知道这需要一个Jquery解决方案，但是尽管我指出这很容易用普通的javascript切换。

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

它将在所有当前和将来的版本中运行。

<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>');
    }
})