Copy Selected Checkbox Value From One Checkbox To Another Immediately Using JQUERY

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

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>

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

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

I get the following error:

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)

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

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.

Answer

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)

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>

Advertisement

Answer