checkbox values not working as expected after checking a checkbox

Question

I have the following code:


<div>
      <div><label>Update Tiers:</label></div>
               <div>
                  <label><input id="tierIPrefixCheckboxSelected1" name="tierIPrefixCheckboxSelected" type="checkbox" value=""><input type="hidden" name="_tierIPrefixCheckboxSelected" value="">Tier-I</label>
                  <label><input id="tierIIPrefixCheckboxSelected1" name="tierIIPrefixCheckboxSelected" type="checkbox" value=""><input type="hidden" name="_tierIIPrefixCheckboxSelected" value="">Tier-II</label>
                  <label><input id="tierIIIPrefixCheckboxSelected1" name="tierIIIPrefixCheckboxSelected" type="checkbox" value="true" checked="checked"><input type="hidden" name="_tierIIIPrefixCheckboxSelected" value="">Tier-III</label>
               </div>
            </div>
         </div>
      </div>

The above code has third label checked(third checkbox) when an item from the dropdown list is selected.

The whole thing is inside an onchange function (details not shown) as shown below:

$("#availablePrefixes").change(function () {

//On change - just make sure all checkboxes have been unchecked
             $('input:checkbox[name=tierIPrefixCheckboxSelected]').attr('checked',false);
             $('input:checkbox[name=tierIPrefixCheckboxSelected]').val("");
           
            $('input:checkbox[name=tierIIPrefixCheckboxSelected]').attr('checked',false)
             $('input:checkbox[name=tierIIPrefixCheckboxSelected]').val("");

            $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').attr('checked',false);
            $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').val("");
            
            
                $('input:checkbox[name=tierIPrefixCheckboxSelected]').change(function(){
                
                    
                    console.log("Tier1 Prefix checkbox checked");
                    $('input:checkbox[name=tierIPrefixCheckboxSelected]').val(true);
                    $('input:checkbox[name=tierIPrefixCheckboxSelected]').attr('checked',true);
                    //Make Tier II and Tier III false and uncheck
                    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').val("");
                    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').attr('checked',false); 
                    
                    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').val("");
                    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').attr('checked',false); 
                    
                    
                })
                
                $('input:checkbox[name=tierIIPrefixCheckboxSelected]').change(function(){
                
                    
                    console.log("Tier 2 Prefix checkbox checked");
                    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').val(true);
                    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').attr('checked',true);
                    //Make Tier I and Tier III false and uncheck
                    $('input:checkbox[name=tierIPrefixCheckboxSelected]').val("");
                    $('input:checkbox[name=tierIPrefixCheckboxSelected]').attr('checked',false);
                    
                    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').val("");
                    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').attr('checked',false); 
                    
                    
                })
                
                $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').change(function(){
                
                    
                    console.log("Tier 3 Prefix checkbox checked");
                    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').val(true);
                    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').attr('checked',true);
                    
                    //Make Tier I and Tier II false and uncheck
                    
                    $('input:checkbox[name=tierIPrefixCheckboxSelected]').val("");
                    $('input:checkbox[name=tierIPrefixCheckboxSelected]').attr('checked',false);
                    
                    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').val("");
                    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').attr('checked',false); 
                    
                    
                })
            
            
});

The problem I am running into is (let's say if I check mark Tier II checkbox, on the UI, the check box for Tier III will be unchecked as soon as I check marks Tier II check box. However, when I am submitting the form, it is sending true for Tier II (which I want) as well as for Tier III (which I don't want). Is there something I'm doing wrong in the above code?

$("#availablePrefixes").change(function () {

//On change - just make sure all checkboxes have been unchecked
             $('input:checkbox[name=tierIPrefixCheckboxSelected]').attr('checked',false);
             $('input:checkbox[name=tierIPrefixCheckboxSelected]').val("");
           
            $('input:checkbox[name=tierIIPrefixCheckboxSelected]').attr('checked',false)
             $('input:checkbox[name=tierIIPrefixCheckboxSelected]').val("");

            $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').attr('checked',false);
            $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').val("");
            
            
                $('input:checkbox[name=tierIPrefixCheckboxSelected]').change(function(){
                
                    
                    console.log("Tier1 Prefix checkbox checked");
                    $('input:checkbox[name=tierIPrefixCheckboxSelected]').val(true);
                    $('input:checkbox[name=tierIPrefixCheckboxSelected]').attr('checked',true);
                    //Make Tier II and Tier III false and uncheck
                    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').val("");
                    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').attr('checked',false); 
                    
                    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').val("");
                    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').attr('checked',false); 
                    
                    
                })
                
                $('input:checkbox[name=tierIIPrefixCheckboxSelected]').change(function(){
                
                    
                    console.log("Tier 2 Prefix checkbox checked");
                    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').val(true);
                    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').attr('checked',true);
                    //Make Tier I and Tier III false and uncheck
                    $('input:checkbox[name=tierIPrefixCheckboxSelected]').val("");
                    $('input:checkbox[name=tierIPrefixCheckboxSelected]').attr('checked',false);
                    
                    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').val("");
                    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').attr('checked',false); 
                    
                    
                })
                
                $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').change(function(){
                
                    
                    console.log("Tier 3 Prefix checkbox checked");
                    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').val(true);
                    $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').attr('checked',true);
                    
                    //Make Tier I and Tier II false and uncheck
                    
                    $('input:checkbox[name=tierIPrefixCheckboxSelected]').val("");
                    $('input:checkbox[name=tierIPrefixCheckboxSelected]').attr('checked',false);
                    
                    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').val("");
                    $('input:checkbox[name=tierIIPrefixCheckboxSelected]').attr('checked',false); 
                    
                    
                })           
            
});

<div>
<div><label>Update Tiers:</label></div>
         <div>
            <label><input id="tierIPrefixCheckboxSelected1" name="tierIPrefixCheckboxSelected" type="checkbox" value=""><input type="hidden" name="_tierIPrefixCheckboxSelected" value="">Tier-I</label>
            <label><input id="tierIIPrefixCheckboxSelected1" name="tierIIPrefixCheckboxSelected" type="checkbox" value=""><input type="hidden" name="_tierIIPrefixCheckboxSelected" value="">Tier-II</label>
            <label><input id="tierIIIPrefixCheckboxSelected1" name="tierIIIPrefixCheckboxSelected" type="checkbox" value="true" checked="checked"><input type="hidden" name="_tierIIIPrefixCheckboxSelected" value="">Tier-III</label>
         </div>
      </div>
   </div>
</div>

<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

Does this answer your question? [jQuery - checkbox enable/disable](https://stackoverflow.com/questions/2330209/jquery-checkbox-enable-disable) — miken32, Aug 24 '23 at 18:19

score 0 · Accepted Answer · edited Aug 21 '23 at 23:48

Using change means you're listening to the checkbox when it become checked, but also when it become unchecked, so you need to only execute the function on change event if the checkbox is set to true:

$("#availablePrefixes").change(function () {
    // ... (your existing code)

    $('input:checkbox[name=tierIPrefixCheckboxSelected]').change(function(){
        if ($(this).prop('checked')) { // check if the change detected is that the checkbox was checked not unchecked.
            console.log("Tier1 Prefix checkbox checked");
            $('input:checkbox[name=tierIPrefixCheckboxSelected]').val(true);
            $('input:checkbox[name=tierIPrefixCheckboxSelected]').attr('checked',true);
            //Make Tier II and Tier III false and uncheck
            $('input:checkbox[name=tierIIPrefixCheckboxSelected]').val("");
            $('input:checkbox[name=tierIIPrefixCheckboxSelected]').attr('checked',false); 
            
            $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').val("");
            $('input:checkbox[name=tierIIIPrefixCheckboxSelected]').attr('checked',false);
        }
    });

    // Similar changes for the other checkboxes
    // ...

});

I made the change you suggested and it still seems to be doing the same thing. Sending true for Tier II and Tier III both, — Tan, Aug 22 '23 at 00:07
That worked. I had the above code inside a function of Ajax call and hence it didn't work first. I took it out and now it's working. Thanks! — Tan, Aug 22 '23 at 02:54

checkbox values not working as expected after checking a checkbox

1 Answers1