使用JQUERY立即将选中的复选框值从一个复选框复制到另一个复选框

我对Jquery比较新，并且在最后一天左右一直在努力解决这个问题。 我想做一些看似简单的事情，但我无法解决这个问题。 我有两个相同的复选框，包含许多条目，最终用户可以在任一复选框中选择多个选项。 如果选中了checkboxa中的值，我希望它立即在checkboxb中选择相同的值。 我研究了很多解决方案，我尝试过以下方法：

$(document).ready(function (){ $("#id_checkboxa").change(function() { $('#id_checkboxa input[type="checkbox"]:checked').each(function(){ $('#id_checkboxb input[type="checkbox"]').eq($(this).index()).prop('checked',true); }); }); }); 

我的HTML。 我正在使用Django模板和带有查询集的表单进行选择，这就是为什么我试图通过Jquery利用ID进行复选框操作。

 
 Checkboxa: 
 
 {{ form.checkboxa }} 
 
  

我通过在SO上引用以下代码片段找到了上面的方法。 将一组复选框的复选检查状态复制到另一个字段集

上面会将我在checkboxa中选择的第一个值复制到checkboxb的顶部，但就是这样。 我怀疑我需要遍历索引或创建一个数组来尝试查找已检查的值，但不能完全解决。 我当然希望使用JQUERY ID方法来解决这个问题。 提前感谢任何想法。

经过实验，我已经……

  $(document).ready(function (){ $("#id_checkboxa").change(function() { console.log("Hello world!"); }); }); 

我的控制台将展示你好的世界！

当我尝试做类似……

  $(document).ready(function (){ $("#id_checkboxa").change(function() { console.log("Hello world!"); let selectedValA = $(this).val(); let isAChecked = $(this).prop("checked"); $(`#id_checkboxb[value=${selectedValA}]`).prop("checked", isAChecked); }); }); 

我收到以下错误：

 jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #id_checkboxb[value=] at Function.fb.error (jquery.min.js:2) at fb.tokenize (jquery.min.js:2) at fb.select (jquery.min.js:2) at Function.fb [as find] (jquery.min.js:2) at n.fn.init.find (jquery.min.js:2) at new n.fn.init (jquery.min.js:2) at n (jquery.min.js:2) at HTMLUListElement. ((index):85) at HTMLUListElement.dispatch (jquery.min.js:3) at HTMLUListElement.r.handle (jquery.min.js:3) 

我从之前的实验中了解到，Djangoforms和JQuery有时候很难连接。 提前感谢任何其他想法。

如果我做以下……

  $(document).ready(function (){ $("#id_checkboxa").change(function() { console.log("Hello world!"); let selectedValA = $(this).val(); let isAChecked = $(this).prop("checked"); $('#id_checkboxb input[type=checkbox]').prop('checked', true); }); }); 

我在checkboxa中选择复选框值时，会选中所有checkboxb值。 我试图获得我在checkboxa中选择的值以显示n checkboxb，而不是所有复选框。

Answer 1

我相信我知道你要做什么。 对于类来说这似乎更容易（按类名对复选框进行分组）

当单击带有checkboxA类的复选框时，它还将选中带有checkboxA类B的复选框，并且仅当复选框具有与checkboxB相同的值时

 $(document).ready(function() { $(".checkboxA").change(function() { let selectedValA = $(this).val(); let isAChecked = $(this).prop("checked"); // get a checkbox from the checkboxs with class "checkboxB" and have the same value as the checked checkboxA and set its checked prop to the same as checkboxA $(`.checkboxB[value=${selectedValA}]`).prop("checked", isAChecked); }); }); 

   
 one  two  three  four  five  
 
 
  
 one  two  three  four  five   

Answer 2

难道你不能简单地切换不是所选复选框的同一类的所有框吗？

 $('.CbAB').off('change').on('change', function() { $('.CbAB').not(this).prop('checked', this.checked); }); 

  A
 B
 

Answer 3

由于我使用Django表单和模板，我不能轻易使用类。 利用上述建议以及大量研究。 我发现我需要使用输入名称而不是类或ID。 这是我的代码解决了我的问题。

  $(document).ready(function() { $("[name=checkboxa]").change(function() { let selectedValA = $(this).val(); let isAChecked = $(this).prop("checked"); $(`[name=checkboxb][value="${selectedValA}"]`).prop("checked", isAChecked); }); }); }); 

您需要询问DOM并找出复选框的名称。 在上面的例子中，名称是checkboxa和checkboxb。 感谢所有帮助我来到这里的建议。