选中复选框后，请选中与JavaScript相同值的其他复选框

Question

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

    <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);
});