Question

我对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

上面的操作会将我在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值都被选中。我试图只获取我在checkboxa中选择的值以显示为n checkboxb，而不是所有复选框。

Answer 1

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

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

Answer 2

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

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

Answer 3

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

FormsAuthentication

您需要查询DOM并弄清楚复选框的名称是什么。在上述情况下，名称为checkboxa和checkboxb。感谢所有帮助我到达这里的建议。

Answer 4

以下对我有用：

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

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

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

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

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

4 个答案: