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

我对Jquery比较陌生，最近一天左右一直在努力解决这个问题。我试图做一些看似简单的事情，但我不能完全解决它。我有两个相同的复选框，其中有许多条目，最终用户可以在任一复选框中选择多个选项。如果选中复选框a中的某个值，我希望它立即在复选框B中选择相同的值。我研究了许多解决方案，并尝试了以下方法：

       $(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进行复选框操作

<div class="spacer34">
  <label class="title130">Checkboxa:</label>
    <div class="spacer68">
      <div class="spacer73">
        {{ form.checkboxa }}
      </div>
    </div>
</div>

我的控制台将显示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.<anonymous> ((index):85)
    at HTMLUListElement.dispatch (jquery.min.js:3)
    at HTMLUListElement.r.handle (jquery.min.js:3)

---

当我在checkboxa中选择复选框值时，所有的checkboxb值都被选中。我只是想让我在checkboxa中选择的值显示在checkboxb中，而不是所有复选框中。

您不能简单地切换同一类中所有未选中复选框的框吗

$（'.CbAB'）.off（'change'）.on（'change'，function（））{
$（'.CbAB'）.not（this.prop（'checked'，this.checked）；
});

A

我相信我知道你想做什么。这似乎可以更容易地使用类（按类名将复选框分组）

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


$（文档）.ready（函数（）{
$（“.checkboxA”）.change（函数（）{
让selectedValA=$（this.val（）；
让isacheed=$（this）.prop（“checked”）；
//从类为“checkboxB”的复选框中获取一个复选框，该复选框与选中的复选框a具有相同的值，并将其选中的属性设置为与复选框a相同
$（`.checkboxB[value=${selectedValA}]`）.prop（“checked”，ischecked）；
});
});

1
2
3
4
5




1
2
3
4
5
因为我使用的是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。感谢所有帮助我来到这里的建议。
以下内容对我很有用：

$('#id_checkboxa').attr("checked", $('#id_checkboxb').prop("checked"));

attr
返回属性值：第一个匹配元素的值

应使用
attr（）
方法检索HTML属性

prop（）？我很难想象“最终用户可以在任意一个复选框中选择两个相同的复选框，其中包含许多条目和多项选择”是什么样子。@Andrew Lohr。谢谢你的回复。我正在使用django表单和模板。我已经更新了上面的代码，以包含基本上表示复选框的HTML。我已经成功地使用Jquery ID来获取元素，因为Django模板在这种情况下不容易支持简单的HTML，因为它与复选框有关。@Andrew Lohr和DreamTek。谢谢你的意见。我整个上午都在玩弄这个，但没法让它发挥作用。因为我使用的是Django表单，所以我觉得这有点棘手。事实上，我喜欢Django表单的简单性，但有时找到一些看似最简单的东西的文档或示例可能会非常令人沮丧。我从Jquery和Django表单中了解到，在某些操作中使用ID是非常特别的。我已经更新了我的代码来显示我能走多远。史蒂夫，可能是字符串模板绊倒了你。也许您的env不允许使用ES6（较新的javascript）函数，比如字符串模板。您可以用此行替换它，并查看它是否有效
$（“#id_checkboxb[value=“+selectedValA+”]）
@Andrew Lohr。再次感谢。我试过你的建议，但还是不起作用。我更新了顶部的代码条目，以表明我可以让它工作……但不是我所希望的那样。如果我包括输入[type=checkbox]，我似乎取得了进一步的进展，但我只是尝试获取所选的值，而不是所有的值。
        $(document).ready(function() {
          $("[name=checkboxa]").change(function() {
            let selectedValA = $(this).val();
            let isAChecked = $(this).prop("checked");
            $(`[name=checkboxb][value="${selectedValA}"]`).prop("checked", isAChecked);
          });
        });
        });

$('#id_checkboxa').attr("checked", $('#id_checkboxb').prop("checked"));