Radio button management - when I choose one, it automatically selects the other jQuery-CodePudding

I have 4 radio buttons, I would like when I click one (or set it to automatically select on start) so that when I select DeliveryYesSingle, it will automatically select deliveryYesSingleBoard. however this function doesn't work like in If choose "if selected"

jQuery:

*
            if(jQ('[id="DeliveryYesSingle"]').is(':checked')){
                jQ('[id="deliveryYesSingleBoard"]').prop('checked', true);
            
    };

    if(jQ('[id="DeliveryNoSingle"]').is(':checked')){
        jQ('[id="DeliveryNoSingleBoard"]').prop('checked', true);
};

HTML :


                <div >
                    <div >
                        <div >
                            <input type="radio"   id="DeliveryYesSingle" name="deliveryCredit"   value="yes"/><label data-timtranslationlabel="" for="deliveryCredit_Yes"  >Delivery on credit</label>
                        </div>
                    </div>
                    <div >
                        <div >
                            <input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/><label data-timtranslationlabel="" for="deliveryCredit_No"  >Advance payment to supplier</label>
                        </div>
                    </div>
                </div>
                                <div  id="DeliveryOnCreditBoard" >    
                    <div >
                        <div >
                            <div >
                                <input type="radio" id="deliveryYesSingleBoard" name="deliverySingle"   value="yes"/><label data-timtranslationlabel="" for="deliveryYesSingleBoard"  >Delivery on credit</label>
                            </div>
                        </div>
                        <div >
                            <div >
                                <input type="radio"  id="DeliveryNoSingleBoard" name="deliverySingle"  value="np"/><label data-timtranslationlabel="" for="DeliveryNoSingleBoard"  >Advance payment to supplier</label>
                            </div>
                        </div>
                    </div>
                    </div>

https://jsfiddle.net/Palucci92/w4djnhgb/3/

CodePudding user response：

Those two if statements will run immediately after the page loads, and only once. if statements should not be used to check for user input, such as selecting a radio button. You'll need to register an event on the two radio buttons you want to check for user input on, for instance:

jQ('[id="DeliveryYesSingle"]').on('change', () => {

});

In this case, the change event is used to detect when a radio button is checked (see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).

And within the callback function block (inside the curly braces), you can then perform your .prop() call to change the property of the other radio buttons.