单选按钮管理 - 当我选择一个时，它会自动选择另一个 jQuery

Question

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 class="row gutters">
                    <div class="col col-2">
                        <div class="form-item form-checkboxes">
                            <input type="radio"   id="DeliveryYesSingle" name="deliveryCredit"   value="yes"/><label data-timtranslationlabel="" for="deliveryCredit_Yes" class="checkbox" >Delivery on credit</label>
                        </div>
                    </div>
                    <div class="col col-2">
                        <div class="form-item form-checkboxes">
                            <input type="radio" id="DeliveryNoSingle" name="deliveryCredit" value="no"/><label data-timtranslationlabel="" for="deliveryCredit_No" class="checkbox" >Advance payment to supplier</label>
                        </div>
                    </div>
                </div>
                                <div class="section" id="DeliveryOnCreditBoard" >    
                    <div class="row gutters">
                        <div class="col col-2">
                            <div class="form-item form-checkboxes">
                                <input type="radio" id="deliveryYesSingleBoard" name="deliverySingle"   value="yes"/><label data-timtranslationlabel="" for="deliveryYesSingleBoard" class="checkbox" >Delivery on credit</label>
                            </div>
                        </div>
                        <div class="col col-2">
                            <div class="form-item form-checkboxes">
                                <input type="radio"  id="DeliveryNoSingleBoard" name="deliverySingle"  value="np"/><label data-timtranslationlabel="" for="DeliveryNoSingleBoard" class="checkbox" >Advance payment to supplier</label>
                            </div>
                        </div>
                    </div>
                    </div>

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

Answer 1

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.