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

Question

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

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

上面的代码会将我在复选框 a 中选择的第一个值复制到复选框 b 的顶部，仅此而已。我怀疑我需要遍历索引或创建一个数组来尝试找到检查的值，但不能完全解决。我绝对想使用 JQUERY ID 方法来解决这个问题。提前感谢您的任何想法。

经过实验，我已经达到了......

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

我的控制台将显示 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 值都被选中。我试图让我在 checkboxa 中选择的值出现在 checkboxb 中，而不是所有复选框。

Answer 1

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

当具有 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>