选中 jQuery 设置复选框答案

【问题标题】：jQuery set checkbox checked选中 jQuery 设置复选框
【发布时间】：2013-02-09 06:15:42
【问题描述】：

我已经尝试了所有可能的方法，但仍然没有成功。我有一个带有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，以及在论坛中看到的其他人，但似乎都没有工作。
有人能指点我吗？

编辑

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

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

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

【问题讨论】：

当模态打开时，模态 div 上应用了什么类？另外，您如何检查数据库值 - 使用 AJAX 还是已经预取并存储在变量中？
加载模式窗口后设置复选框我认为您在加载模式窗口之前设置了复选框。 $('#fModal').modal('show'); $("#estado_cat").attr("checked","checked");

标签： jquery checkbox

【解决方案1】：

试试下面的代码：

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

【讨论】：

在 KeyOfJ 的回答中，使用 .prop('checked', true) 而不是 attr - 我刚遇到同样的问题，prop 有效。
仅供参考，如果您想使用 :checked 伪选择器或其他原生复选框 HTML 功能，则必须使用 .prop。
试过这个并没有用，但是当我将代码更改为 $("div.row-form #estado_cat").prop("checked","checked");它确实奏效了。（将 attr 更改为 prop）。
不幸的是，prop 是 jQuery 1.6 或更高版本，所以如果你被困在一个不适合你的遗留框架中
.attr() 是用于早期版本的方法，.prop() 用于 jQuery 1.6+。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

它将适用于所有当前和未来的版本。

【讨论】：

我认为有时我们会忘记一些更基本的东西使用原始 js 会好得多。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

$("#id").click()

【讨论】：

因为复选框具有附带的功能，这是将其设置为选中并让相关逻辑相应地运行的干净方式。有充分的理由证明这是公认的答案

【解决方案6】：

你必须使用'prop'函数：

.prop('checked', true);

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

.attr('checked','checked')

【讨论】：

你似乎有正确的答案。你能详细说明一下吗？ stackoverflow.com/a/5876747/29182
很高兴知道这一点。在浏览 jQuery 3.3.x 的迁移文档时忽略了这一点
很高兴知道您不能像我最初认为的那样在较新版本的 jQuery 中使用 attr
@Kaloyan 我希望我也知道......本可以并且会为我节省很多时间。

【解决方案7】：

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

勾选框：

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

取消选中该框：

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

用于测试检查状态：

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

希望对你有帮助...

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

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

【讨论】：

Attr 不会选中复选框，prop 是用来检查的。喜欢.prop('checked', true);More info in this Post
@casivaagustin 取决于 jQuery 版本。我相信早于 jQuery 1.6，.attr() 确实有效，如上所述。

【解决方案10】：

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

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

这里是完整日历修改的简写代码，如果检索到的值“allDay”为真，则选中 ID 为“even_allday_yn”的复选框：

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

【讨论】：

为什么不单行呢？ $( "#even_allday_yn").prop('checked', allDay);
他试图展示可能的价值。如果没有像这样的例子，你怎么知道“allDay”的真正价值？
@Xavier Hayoz。当且仅当 allDay 返回 'true' 或 'false' 作为 litteral 值（而不是纯二进制值）时，此方法才有效。复选框在 html 中设计得很糟糕，它们的选中状态可以用非常不同的方式表示。我知道的安全且唯一的一种方法是： allDay === 'true' ？ $('#even_allday_yn).prop ("checked", true): $('#even_allday_yn).prop ("checked", false)。注意严格相等运算符。
$('#even_allday_yn').prop('checked', allDay === true) 会起作用，因为allDay === true 会给出布尔结果。

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

我也遇到过这个问题。

这是我的旧代码不起作用

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

所以，关键是在它起作用之前，确保选中的属性确实存在并且没有被删除。

【讨论】：

简单得多：Jbookaccess.prop("checked", data.access != 'private');

【解决方案13】：

这行得通。

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

【讨论】：

【解决方案14】：

为我工作：

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

【讨论】：

用户 $("#estado_cat").attr("checked","checked");

【解决方案15】：

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

【讨论】：

【解决方案16】：

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

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

如果你不使用 find 那么

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

这在我的 Mozilla Firefox 中运行良好

【讨论】：

这行得通，如果您的 css 中有 :checked 样式，则不会检测到所有其他解决方案

【解决方案17】：

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

HTML

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

jQuery

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

希望它对你有用。

【讨论】：

【解决方案18】：

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

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

【讨论】：

应该注意的是，虽然手头问题的其他答案可能“有效”，但使用 prop 作为这个答案表明是完成动态 jQuery 复选框检查/取消检查的正确方法。

【解决方案19】：

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

    }
   });

【讨论】：