使用 jQuery 选中/取消选中引导复选框

Posted 2023-05-08

【中文标题】使用 jQuery 选中/取消选中引导复选框

【英文标题】：check/uncheck bootstrap checkboxes with jQuery

【发布时间】：2014-09-28 08:48:51

【问题描述】：

我昨天又做了一个post，但没有成功。我现在将尝试重新排序并再次询问，因为我找不到解决方案（我是新手，我正在努力）。

问题是我正在使用这个基于 Bootstrap 的模板，这是我可以直接从其中一个文件中看到的代码，并且我正在我的项目中使用：

html sn-p:

<div class="hide" id="states">
  <div class="control-group">                           
    <label class="control-label">Seleccione</label>
      <div class="controls">
        <label class="checkbox span4">
          <input type="checkbox" value="all" id="allstates" name="all"/>Todas
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Caba" id="" name="st[]"/>Ciudad Autónoma de Buenos Aires
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]"/> Buenos Aires
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Catamarca" id="" name="st[]"/> Catamarca
        </label>
      </div>
    </div>
  </div>

经过大量搜索后，我发现我的代码看起来像这样 (sn-p)：

<div class="controls">
  <label class="checkbox span4">
    <div class="checker" id="uniform-allstates">
      <span>
        <input type="checkbox" value="all" id="allstates" name="all">
      </span>
    </div>Todas
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Caba" id="" name="st[]">                          
       </span>
    </div> Ciudad Autónoma de Buenos Aires
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]">                           
      </span>
    </div> Buenos Aires
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Catamarca" id="" name="st[]">                             
      </span>
    </div> Catamarca
  </label>
</div>        

如您所见，添加了另一个 div 和另一个 span（真的不知道为什么或如何），所以我现在猜测这是我遇到的一些 DOM 问题。

这是我的 js 文件的 sn-p：

$('#allstates').click(function() 
  $('.checkbox').find('span').addClass('checked');
);

所以这个函数会选择我拥有的所有复选框（即使那些我不想要的复选框，因为它们属于另一个类别）。

我想知道为什么要添加 div 和 span 以及如何只选择我想要的复选框。

为此，我一直在尝试这样的代码，但没有成功：

测试 1

$('#allstates').click(function() 
  if ($(this).is(':checked')) 
    $('span input').attr('checked', true);
   else 
    $('span input').attr('checked', false);
  
);

测试2

$('#allstates').click(function() 
  $(".states").prop("checked",$("#allstates").prop("checked"))
);

还有其他我删除的。

注意：检查时不显示 js 错误

【问题讨论】：

$('#checkboxId').prop('checked');来自***.com/a/28604443/1225421

【参考方案1】：

在选择复选框时将 prop 添加到 true 也很重要：

$("#checkAll").click(function()
   var check = $(this).prop('checked');
   if(check == true) 
     $('.checker').find('span').addClass('checked');
     $('.checkbox').prop('checked', true);
    else 
     $('.checker').find('span').removeClass('checked');
     $('.checkbox').prop('checked', false);
   
);

【讨论】：

在点击时手动处理复选框选中状态帮助我解决了我的 ios (12.1+) 网络应用程序上的一个奇怪问题，其中浏览器正在呈现我的复选框的反转状态?

【参考方案2】：

自从我提到这个函数检查了我拥有的所有复选框（即使那些不应该被选中的复选框），我一直在寻找解决方案：

$('#allstates').click(function() 
  $('.checkbox').find('span').addClass('checked');
);

但这不是我想要的。我还提到我注意到代码在检查时是“不同的”（在带有 F12 的 Chrome 中）。正如@thecbuilder 所说，它会更改以添加样式。

我意识到由于代码正在更改...我必须更改开始“span 标签”搜索的类（复选框），所以我将类复选框更改为 id 状态，结果如下：

$('#allstates').click(function() 
  if($(this).attr("checked"))
    $('#states').find('span').addClass('checked');        
  else
    $('#states').find('span').removeClass('checked');
      
);

现在终于可以用了。

【讨论】：

请查看***.com/questions/32266101/…

【参考方案3】：

我认为您正在寻找如下代码：

$(document).ready(function()

    $("#allstates").on("change", function()
    
        var checked = $(this).prop("checked");

        $(this).parents(".controls")
            .first()
            .find("input[type=checkbox]")
            .prop("checked", checked);
    );
);

JsFiddle Example

当id为allstates的复选框的状态发生变化时，获取复选框的值，找到第一个父html元素，其类名为controls，然后只更新该元素中所有值为checked的复选框.

【讨论】：

您好，感谢您的回答。我知道它适用于小提琴，但不适用于我的代码..

我 updated the fiddle with your exact html 它似乎工作。有什么不好的地方？

是的，我知道，我自己构建了在小提琴上工作但在我的代码中没有的代码。我不知道可能是什么..我发布的 js 代码确实有效，但选择了所有复选框，即使我不想选择这些复选框

感谢您的关注。我现在这有效，但在我的情况下不起作用。不过我想出了解决方案

请查看***.com/questions/32266101/…

【参考方案4】：

简单的引导复选框

<label><input type="checkbox" value="">Option 1</label>

在 Chrome 开发工具中调试时，标签看起来像 https://tinker.press/images/bootstrap-checkbox-label-2017-01-17_084755.png

要切换复选框状态，只需在 lable.control.checked 上设置 true|false

label.control.checked = false; //uncheck
label.control.checked = true; //check

视频演示https://youtu.be/3qEMFd9bcd8

【讨论】：

遗憾的是，当您使用复选框和单选按钮时，这不起作用：getbootstrap.com/docs/4.0/components/buttons/…

视频教程很有用