已选中jquery set复选框

Question

我已经尝试了所有可能的方法，但我仍然没有让它工作。 我有一个带有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;
    });     
});

Answer 1

你必须使用'prop'功能：

.prop('checked', true);

在jQuery 1.6之前（参见user2063626's answer）：

.attr('checked','checked')

Answer 2

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

我无法添加评论或答案，但我觉得这非常重要，可以添加到对话中。

以下是fullcalendar修改的longhand代码，表示如果检索到的值“allDay”为true，则选中ID为“even_allday_yn”的复选框：

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

Answer 3

老兄尝试下面的代码：

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

OR

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

OR

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

Answer 4

由于您处于模态窗口（无论是动态的还是在页面中），您可以使用以下代码来实现您的目标:(我在我的网站上遇到了同样的问题，这就是我修复它的方法）

HTML：

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

CODE：

$.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属性。如果是这样，我想打开窗口中的复选框，该复选框在用户从此窗口保存时设置该属性。

Answer 5

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

选中复选框：

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

取消选中此框：

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

用于测试已检查状态：

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

希望它有所帮助...

Answer 6

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

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

Answer 7

你可以写下面给出的代码。

<强> HTML

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

<强>的jQuery

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

希望它适合你。

Answer 8

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

Find将返回数组，因此即使只有一个项目

，也要使用[0]

如果你不使用find那么

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

这对我来说在Mozilla Firefox中运行良好

Answer 9

为我工作：

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

Answer 10

试试这个，因为你可能正在使用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');

    }
   });

Answer 11

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

$("#id").click()

Answer 12

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

Answer 13

这很有效。

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

Answer 14

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

Answer 15

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

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

Answer 16

我也遇到了这个问题。

这是我以前的旧代码

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

Answer 17

我知道这需要一个Jquery解决方案，但我只是指出要用纯JavaScript切换它非常容易。

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

它将在所有当前和将来的版本中使用。

Answer 18

<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>

Answer 19

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