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

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 clicked Yes here : Guarantee or other security given by custome Single automatically selects Yes here : Guarantee or other security given by customer :

Below is my code jQeury , HTML and source code :

                                                                  <div >
                       <div ><label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_single">Guarantee or other security given by custome Single</label></div>
                       <div >
                           <div >
                               <input type="radio" id="DeliveryYesSingle" name="deliveryCredit"   value="yes"/><label data-timtranslationlabel="Hyes" for="deliveryCredit_Yes" >Yes</label>
                           </div>
                       </div>
                       <div >
                           <div >
                               <input type="radio" id="DeliveryNoSingle" name="deliveryCredit"   value="no"/><label data-timtranslationlabel="Hno" for="deliveryCredit_No" >No</label>
                           </div>
                       </div>
                   </div>
                   <div >
                   <div ><label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_singleBoard">Guarantee or other security given by customer</label></div>
                   <div >
                       <div >
                           <input type="radio" id="deliveryYesSingleBoard" name="deliverySingle"   value="yes"/><label data-timtranslationlabel="Hyes" for="deliveryYesSingleBoard" >Yes</label>
                       </div>
                   </div>
                   <div >
                       <div >
                           <input type="radio" id="DeliveryNoSingleBoard" name="deliverySingle"   value="no"/><label data-timtranslationlabel="Hno" for="DeliveryNoSingleBoard" >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/

CodePudding user response：

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/

CodePudding user response：

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 >
                   <div ><label data-timtranslationlabel="MXGuranteeOrOther" for="guranteereqeust_single">Guarantee or other security given by custome Single</label></div>
               <div >
                   <div >
     <input type="radio" id="DeliveryYesSingle" name="deliveryCredit" value="yes"/><label data-timtranslationlabel="Hyes" for="deliveryCredit_Yes" >Yes</label>
                                       </div>
                                   </div>
                    <div >
                       <div >
   

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

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

>No</label>
                                
</div>
                     </div>
                </div>
            </div>