[英]when check a checkbox, checked other checkbox with same value with javascript
我有兩個帶有無線電類型輸入的 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>
有人可以幫助我嗎?
您必須為第一種形式的每個單選框設置唯一值。
並檢查何時無線電單擊 => 獲取值並檢查第二形式中的相同唯一值。
例子:
$(document).on('click', '[type="radio"]', function () {
let value = $(this).val();
$('[value="'+value+'"]').prop('checked', true);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.