when check a checkbox, checked other checkbox with same value with javascript

Question

I have two forms with radio type inputs, I would like that when we check an input in the 1st form another input is automatically checked in the second. Here is the code of the 1st form:

    <div class="color-box cta-box">
            <label>Colors</label>
                <div class="vpc-single-option-wrap">
                    <input id="cta-couleur_noir-color-selector" type="radio" name="couleur-color-selector" data-field="couleur-field" checked="" data-qtip="no">
                    <label for="cta-couleur_Noir-color-selector" class="vpc-custom-color custom" data-selector="couleur-field" data-color="Noir" data-name="Noir" data-oriontip="Noir" style="background-color:#000000"></label>
                </div>

                <div class="vpc-single-option-wrap">
                    <input id="cta-couleur_bleu-color-selector" type="radio" name="couleur-color-selector" data-field="couleur-field" data-qtip="no">
                    <label for="cta-couleur_Bleu-color-selector" class="vpc-custom-color custom" data-selector="couleur-field" data-color="Bleu" data-name="Bleu" data-oriontip="Bleu" style="background-color:#0419bd"></label>
                </div>
    </div>
    

And here is the code of the 2nd form:

    <div class="color-box cta-box">
            <label>Colors</label>
                 <div class="vpc-single-option-wrap">
                    <input id="cta-texte-en-tete-centre_noir-color-selector" type="radio" name="texte-en-tete-centre-color-selector" data-field="texte-en-tete-centre-field" checked="" data-qtip="no">
                    <label for="cta-texte-en-tete-centre_Noir-color-selector" class="vpc-custom-color custom" data-selector="texte-en-tete-centre-field" data-color="Noir" data-name="Noir" data-oriontip="Noir" style="background-color:#000000"></label>
                </div>

                <div class="vpc-single-option-wrap">
                    <input id="cta-texte-en-tete-centre_bleu-color-selector" type="radio" name="texte-en-tete-centre-color-selector" data-field="texte-en-tete-centre-field" data-qtip="no">
                    <label for="cta-texte-en-tete-centre_Bleu-color-selector" class="vpc-custom-color custom" data-selector="texte-en-tete-centre-field" data-color="Bleu" data-name="Bleu" data-oriontip="Bleu" style="background-color:#0419bd"></label>
                </div>
    </div>
    

So I would like that when I check the input with the ID cta-couleur_noir-color-selector in the 1st form, the input with the ID cta-texte-en-tete-centre_noir-color-selector "is automatically checked in the second form and the same for the id" cta-couleur_bleu-color-selector "which would correspond to the ID" cta-texte-en-tete-center_bleu-color-selector .

I tried with this script but it doesn't work:

        <script type="text/javascript">
            jQuery('input[type=radio][name=couleur-color-selector]').on('change', function () {
        if ( jQuery(this).attr('id') == 'cta-couleur_bleu-color-selector'.checked) {
         jQuery('#cta-texte-en-tete-centre_bleu-color-selector').prop(checked, true);
         }else
         {
        jQuery('#cta-texte-en-tete-centre_noir-color-selector').prop('checked', true);
         }     
        });
        </script>

Could someone help me?

Answer 1

You must set unique value for each radio box in 1st form.

and check when radio click => get value and check to same unique value in 2nd form.

example:

$(document).on('click', '[type="radio"]', function () {
    let value = $(this).val();
    $('[value="'+value+'"]').prop('checked', true);
});