Question 35585 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to set prop check in checkbox when second one changes jQuery

I have two fields, where there are two items to choose from, two checkboxes. And I’d like when I click the option Yes, it automatically selects Yes in the other checkbox.

For example: when I click Yes here : Guarantee or other security given by custom Single automatically selects Yes here : Guarantee or other security given by customer :

This is my jQuery code, HTML markup and source code :

<div class="row gutters">
    <div class="col col-2">
        <label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_single">Guarantee or other security given by custome Single</label>
    </div>
    <div class="col col-1">
         <div class="form-item form-checkboxes">
              <input type="radio" id="DeliveryYesSingle" name="deliveryCredit" value="yes"/>
              <label data-timtranslationlabel="Hyes" for="deliveryCredit_Yes" class="checkbox">Yes</label>
         </div>
    </div>
    <div class="col col-1">
        <div class="form-item form-checkboxes">
            <input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/>
            <label data-timtranslationlabel="Hno" for="deliveryCredit_No" class="checkbox">No</label>
        </div>
    </div>
</div>
<div class="row gutters">
    <div class="col col-2">
        <label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_singleBoard">Guarantee or other security given by customer</label>
    </div>
    <div class="col col-1">
        <div class="form-item form-checkboxes">
            <input type="radio" id="deliveryYesSingleBoard" name="deliverySingle" value="yes"/>
            <label data-timtranslationlabel="Hyes" for="deliveryYesSingleBoard" class="checkbox">Yes</label>
        </div>
    </div>
    <div class="col col-1">
        <div class="form-item form-checkboxes">
            <input type="radio" id="DeliveryNoSingleBoard" name="deliverySingle" value="no"/>
            <label data-timtranslationlabel="Hno" for="DeliveryNoSingleBoard" class="checkbox">No</label>
        </div>
    </div>
</div>

jQuery

$('[id="DeliveryYesSingle"]').on('change', () => {
    $('[id="deliveryYesSingleBoard"]').prop('checked', true);
});

$('[id="DeliveryNoSingle"]').on('change', () => {
        $('[id="DeliveryNoSingleBoard"]').prop('checked', true);
});

JSfiddle: https://jsfiddle.net/Palucci92/pouw6q3t/1/

Tags:

2

Answers


  1. 0

    Make sure you imported jQuery. I have just added jQuery tag in your Jsfiddle it’s just working fine

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    also i have just added some script to the process vice-versa

    I have just attaching edited JSfiddle : https://jsfiddle.net/p5thmwab/

    Login or Signup to reply.
  2. 0

    It is working.

    Possible problem is that you didn’t include the Jquery library in your fiddle.

    Try out the snippet I made.

             $('[id="DeliveryYesSingle"]').on('change', () => {
           $('[id="deliveryYesSingleBoard"]').prop('checked', true);
         });
    
         $('[id="DeliveryNoSingle"]').on('change', () => {
            $('[id="DeliveryNoSingleBoard"]').prop('checked', true);
         });
       
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
           <div class="row gutters">
                   <div class="col col-2"><label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_single">Guarantee or other security given by custome Single</label></div>
               <div class="col col-1">
                   <div class="form-item form-checkboxes">
     <input type="radio" id="DeliveryYesSingle" name="deliveryCredit" value="yes"/><label data-timtranslationlabel="Hyes" for="deliveryCredit_Yes" class="checkbox">Yes</label>
                                       </div>
                                   </div>
                    <div class="col col-1">
                       <div class="form-item form-checkboxes">
   

     <input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/><label data-timtranslationlabel="Hno" for="deliveryCredit_No" class="checkbox">No</label>
                                       </div>
                                   </div>
                               </div>
                 <div class="row gutters">
                     

      <div class="col col-2">
<label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_singleBoard">Guarantee or other security given by customer</label></div>
                           <div class="col col-1">
                               <div class="form-item form-checkboxes">
        <input type="radio" id="deliveryYesSingleBoard" name="deliverySingle" value="yes"/>
    <label data-timtranslationlabel="Hyes" for="deliveryYesSingleBoard" class="checkbox">Yes</label>
                                   </div>
                               </div>
                               <div class="col col-1">
                                    <div class="form-item form-checkboxes">
    <input type="radio" id="DeliveryNoSingleBoard" name="deliverySingle" value="no"/>
    <label data-timtranslationlabel="Hno" for="DeliveryNoSingleBoard" 

class="checkbox">No</label>
                                
</div>
                     </div>
                </div>
            </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search