检查复选框时，请检查其他具有相同值的复选框，该值与javascript

Question

我有两个带有无线电类型输入的 forms，我希望当我们检查第一种形式的输入时，会在第二种形式中自动检查另一个输入。 这是第一种形式的代码：

    <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>
    

这是第二种形式的代码：

    <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>
    

所以我希望当我以第一种形式检查 ID cta-couleur_noir-color-selector的输入时，ID cta-texte-en-tete-centre_noir-color-selector的输入“会在第二种形式中自动检查形式和相同的 id“ cta-couleur_bleu-color-selector ”将对应于 ID“ cta-texte-en-tete-center_bleu-color-selector ”。

我尝试使用此脚本，但它不起作用：

        <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>

有人可以帮助我吗？

Answer 1

您必须为第一种形式的每个单选框设置唯一值。

并检查何时无线电单击 => 获取值并检查第二形式中的相同唯一值。

例子：

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