jquery - 选中 jQuery 设置复选框

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, 和其他在论坛中看到的，但似乎没有一个工作。
有人可以指出我正确的方式吗？

编辑

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

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

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

score 968 · Accepted Answer

你必须使用“道具”功能：

.prop('checked', true);

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

.attr('checked','checked')

score 87 · Accepted Answer

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

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

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

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

score 74 · Accepted Answer

试试下面的代码：

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

score 31 · Accepted Answer

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

检查框：

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

取消选中该框：

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

用于测试检查状态：

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

希望能帮助到你...

score 21 · Accepted Answer

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

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

score 12 · Accepted Answer

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

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

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

score 11 · Accepted Answer

11

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

将工作。确保真假不在引号内。

于 2014-06-26T14:59:10.357 回答

score 6 · Accepted Answer

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

$("#id").click()

score 5 · Accepted Answer

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

HTML

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

jQuery

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

希望它对你有用。

score 5 · Accepted Answer

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

score 3 · Accepted Answer

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

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

如果你不使用 find 那么

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

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

score 3 · Accepted Answer

3

为我工作：

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

于 2014-01-23T20:49:35.817 回答

score 2 · Accepted Answer

发生这种情况是因为您使用最新版本的 jqueryattr('checked')返回'checked'而prop('checked')返回true。

score 2 · Accepted Answer

2

这行得通。

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

于 2013-11-28T15:45:19.997 回答

score 2 · Accepted Answer

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

    }
   });

score 2 · Accepted Answer

2

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

于 2013-09-25T18:53:24.137 回答

score 2 · Accepted Answer

我也遇到了这个问题。

这是我的旧代码不起作用

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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

jquery - 选中 jQuery 设置复选框

编辑

19 回答 19

Related

Reference