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

【问题标题】：Copy Selected Checkbox Value From One Checkbox To Another Immediately Using JQUERY使用 JQUERY 立即将选定的复选框值从一个复选框复制到另一个复选框
【发布时间】：2019-03-03 12:30:15
【问题描述】：

我对 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 进行复选框操作。

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

我通过在 SO..Copy check state of a set of checkboxes to another fieldset 上引用以下代码 sn-p 找到了上述方法

上面会将我在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.<anonymous> ((index):85)
    at HTMLUListElement.dispatch (jquery.min.js:3)
    at HTMLUListElement.r.handle (jquery.min.js:3)

我从之前的实验中知道，有时要正确连接 Django 表单和 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 值都会被选中。我试图让我在复选框中选择的值出现在复选框中，而不是所有复选框。

【问题讨论】：

嗨，史蒂夫，你能介绍一下你的 HTML 是什么样子的吗？我无法想象“最终用户可以在任一复选框中选择具有多个条目和多个选项的两个相同复选框”是什么样的。
@Andrew Lohr。感谢您的回复。我正在使用 django 表单和模板。我已经更新了上面的代码以包含基本上代表复选框的 HTML。我已经使用 Jquery ID 成功完成了类似的操作来获取元素，因为 Django 模板在这种情况下不容易允许直接的 HTML，因为它与复选框有关。
@Andrew Lohr 和 DreamTek。谢谢您的意见。我整个早上都在玩这个，但不能让它工作。因为我使用的是 Django 表单，所以我怀疑它有点棘手。我真的很喜欢 Django 表单的简单性，但有时找到一些看似简单的事情的文档或示例可能会非常令人沮丧。我从玩弄 Jquery 和我的 Django 表单中知道，在某些操作中使用 ID 非常特别。我已经更新了我的代码以显示我能走多远。
史蒂夫，它可能是字符串模板让你绊倒。也许您的环境不允许像字符串模板这样的 ES6（较新的 javascript）函数。你可以用这一行替换它，看看它是否有效$("#id_checkboxb[value=" + selectedValA + "]")
@Andrew Lohr。再次感谢。我尝试了你的建议，但它仍然不起作用。我更新了顶部的代码条目，以表明我可以让它工作……但不是我希望的那样。如果我包含 input[type=checkbox]，我似乎取得了进一步的进展，但我试图只获取选定的值，而不是所有值。

标签： javascript jquery django-forms django-templates

【解决方案1】：

以下对我有用：

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

attr返回属性值：FIRST匹配元素的值。

attr() 方法应该用于检索 HTML 属性。

prop() 方法设置或返回所选元素的属性和值。

【讨论】：

【解决方案2】：

由于我使用的是 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。感谢所有帮助我来到这里的建议。

【讨论】：

【解决方案3】：

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

当一个带有checkboxA 类的复选框被点击时，它也会检查带有checkboxB 类的复选框，并且只有当它也具有与 checkboxA 相同的值时

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- checkbox set A -->
<div>
one <input type="checkbox" class="checkboxA" value="1"/>
two <input type="checkbox" class="checkboxA" value="2"/>
three <input type="checkbox" class="checkboxA" value="3"/>
four <input type="checkbox" class="checkboxA" value="4"/>
five <input type="checkbox" class="checkboxA" value="5"/>
</div>

<br/>
<br/>

<!-- checkbox set B -->
<div>
one <input type="checkbox" class="checkboxB" value="1"/>
two <input type="checkbox" class="checkboxB" value="2"/>
three <input type="checkbox" class="checkboxB" value="3"/>
four <input type="checkbox" class="checkboxB" value="4"/>
five <input type="checkbox" class="checkboxB" value="5"/>
</div>

【讨论】：

【解决方案4】：

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="CbAB" type="checkbox" name="CB" value="A">A<br>
<input class="CbAB" type="checkbox" name="CB" value="B">B<br>

【讨论】：