使用JQUERY立即将选定的复选框值从一个复选框复制到另一个复选框 [英] Copy Selected Checkbox Value From One Checkbox To Another Immediately Using JQUERY

问题描述

我对Jquery比较陌生，并且在最后一天左右一直在努力解决此问题.我正在尝试做看似简单的事情，但是我不能完全解决.我有两个相同的复选框，其中有许多条目，最终用户可以在两个复选框中选择多个选项.如果在checkboxa中选择了一个值，我希望它立即在checkboxb中选择相同的值.我研究了许多解决方案，并且尝试了以下方法:

I'm relatively new to Jquery and have been struggling with this problem for the last day or so. I am trying to do something seemingly simple, but I can't quite work it out. I have two identical checkboxes with many entries and multiple choices can be selected by the end user in either checkbox. If a value in checkboxa is selected, I want it to immediately select the identical value in the checkboxb. I have researched many solutions, and I have tried the following:

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

My HTML. I'm using Django template and forms with a queryset for the choices, which is why I am trying to leverage the ID via Jquery for checkbox manipulation.

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

我通过在SO上引用以下代码段找到了上述方法.

I found the approach above by referencing the following code snippet on SO..Copy check state of a set of checkboxes to another fieldset

上面的操作会将我在checkboxa中选择的第一个值复制到checkboxb的顶部，仅此而已.我怀疑我需要遍历索引或创建一个数组来尝试查找所检查的值，但无法完全解决.我绝对想使用JQUERY ID方法来解决此问题.预先感谢您的任何想法.

The above will copy the first value I select in checkboxa to the top of the checkboxb, but that's it. I suspect I need to loop through the index or create an array to try and find the checked values, but can't quite work it out. I definitely want to use the JQUERY ID approach in solving this problem. Thanks in advance for any thoughts.

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

After experimenting, I have gotten as far as...

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

我的控制台将显示世界！

And my console will show the hello world!

当我尝试做类似的事情...

When I try to do something like...

            $(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有时很难正确连接.预先感谢您的任何其他想法.

I know from prior experimentation that Django forms and JQuery can be a challenge to connect just right at times. Thanks in advance for any other thoughts.

如果我执行以下操作...

If I do the following...

              $(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，而不是所有复选框.

The minute I select a checkbox value in checkboxa, all of checkboxb values get selected. I am trying to just get the value I selected in checkboxa to appear n checkboxb, not all checkboxes.

推荐答案

我相信我知道您要做什么.看来使用类可能更容易(按类名称对复选框进行分组)

I believe I know what you are trying to do. This seems like it could be easier with classes (group the checkboxes by class names)

当单击具有checkboxA类的复选框时，还将检查具有checkboxB类的复选框，并且前提是它也具有与checkboxA相同的值

When a checkbox with checkboxA class is clicked it will also check the checkbox with class checkboxB and only if it also has the same value as 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>

这篇关于使用JQUERY立即将选定的复选框值从一个复选框复制到另一个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！