Skip to content
Advertisement

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.

Advertisement

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