单击复选框时显示按钮文本

Question

I have some check boxes and some button text field. I want that if checkbox1 will be clicked then the button text1 should be come and if checkbox2 will be clicked then the button text2 should be come.

But my issue is that when I click on checkbox1 then automatically checkbox2 value (that is button text2) is shown. My codes are below.

My code is working fine if I have only one checkbox and one button text. But I am looking for multi field checkbox and button text.

 (function ($, $document) { $document.ready(function () { $document.on("dialog-ready", function() { if($("coral-checkbox[name='./includebutton'] :checked").length === 1){ $("input[name='./btntext']").parent().show(); $("input[name='./link']").parent().show(); $("coral-select[name='./btnstyle']").parent().show(); } else { $("input[name='./btntext']").parent().hide(); $("input[name='./link']").parent().hide(); $("coral-select[name='./btnstyle']").parent().hide(); } $("coral-checkbox[name='./includebutton']").on("click", function() { if($("coral-checkbox[name='./includebutton'] :checked").length === 1){ $("input[name='./btntext']").parent().show(); $("input[name='./link']").parent().show(); $("coral-select[name='./btnstyle']").parent().show(); } else { $("input[name='./btntext']").parent().hide(); $("input[name='./link']").parent().hide(); $("coral-select[name='./btnstyle']").parent().hide(); } }); }); }); }(jQuery, jQuery(document)));

 <coral-checkbox name="./includebutton" value="true" checked="" data-foundation-validation="" data-validation="" class="coral-Form-field coral3-Checkbox" aria-disabled="false" aria-required="false" aria-invalid="false" aria-readonly="false"> <input type="checkbox" handle="input" class=" coral3-Checkbox-input" id="coral-id-712" value="true" name="./includebutton"> <span class=" coral3-Checkbox-checkmark" handle="checkbox"></span> <label class=" coral3-Checkbox-description" handle="labelWrapper" for="coral-id-712"> <coral-checkbox-label>Add button (bottom)</coral-checkbox-label> </label> </coral-checkbox> <div class="coral-Form-fieldwrapper"><label id="label_46bf06f6-c8c4-4c3f-930a-a3d731c8fc84" class="coral-Form-fieldlabel">Button Text</label><input class="coral-Form-field coral3-Textfield" type="text" name="./btntext" labelledby="label_46bf06f6-c8c4-4c3f-930a-a3d731c8fc84" data-foundation-validation="" data-validation="" is="coral-textfield" id="coral-id-716" aria-labelledby="label_46bf06f6-c8c4-4c3f-930a-a3d731c8fc84" aria-invalid="false"></div> <coral-checkbox name="./includebutton" value="true" data-foundation-validation="" data-validation="" class="coral-Form-field coral3-Checkbox" aria-disabled="false" aria-required="false" aria-invalid="false" aria-readonly="false"><input type="checkbox" handle="input" class=" coral3-Checkbox-input" id="coral-id-726" value="true" name="./includebutton"> <span class=" coral3-Checkbox-checkmark" handle="checkbox"></span> <label class=" coral3-Checkbox-description" handle="labelWrapper" for="coral-id-726"> <coral-checkbox-label>Add button (bottom)</coral-checkbox-label> </label> </coral-checkbox> <div class="coral-Form-fieldwrapper"><label id="label_965366d9-e23a-4c07-88ab-ea55fe6cbd87" class="coral-Form-fieldlabel">Button Text</label><input class="coral-Form-field coral3-Textfield" type="text" name="./btntext" labelledby="label_965366d9-e23a-4c07-88ab-ea55fe6cbd87" data-foundation-validation="" data-validation="" is="coral-textfield" id="coral-id-730" aria-labelledby="label_965366d9-e23a-4c07-88ab-ea55fe6cbd87" aria-invalid="false"></div>

enter image description here

Answer 1

You need something simple just like :

 //For the Load purpose $("coral-checkbox[name='./includebutton']").each(function() { toogleDiv($(this)); }); //For the Click purpose $("coral-checkbox[name='./includebutton']").on("click", function() { toogleDiv($(this)); }); function toogleDiv(_this) { var related_div = _this.next('div'); if ($(':checkbox', _this).is(":checked")) { related_div.show(); } else { related_div.hide(); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <coral-checkbox name="./includebutton" value="true" checked="" data-foundation-validation="" data-validation="" class="coral-Form-field coral3-Checkbox" aria-disabled="false" aria-required="false" aria-invalid="false" aria-readonly="false"> <input type="checkbox" handle="input" class=" coral3-Checkbox-input" id="coral-id-712" value="true" name="./includebutton"> <span class=" coral3-Checkbox-checkmark" handle="checkbox"></span> <label class=" coral3-Checkbox-description" handle="labelWrapper" for="coral-id-712"> <coral-checkbox-label>Add button (bottom)</coral-checkbox-label> </label> </coral-checkbox> <div class="coral-Form-fieldwrapper"> <label id="label_46bf06f6-c8c4-4c3f-930a-a3d731c8fc84" class="coral-Form-fieldlabel">Button Text</label> <input class="coral-Form-field coral3-Textfield" type="text" name="./btntext" labelledby="label_46bf06f6-c8c4-4c3f-930a-a3d731c8fc84" data-foundation-validation="" data-validation="" is="coral-textfield" id="coral-id-716" aria-labelledby="label_46bf06f6-c8c4-4c3f-930a-a3d731c8fc84" aria-invalid="false"></div> <br> <coral-checkbox name="./includebutton" value="true" data-foundation-validation="" data-validation="" class="coral-Form-field coral3-Checkbox" aria-disabled="false" aria-required="false" aria-invalid="false" aria-readonly="false"> <input type="checkbox" handle="input" class=" coral3-Checkbox-input" id="coral-id-726" value="true" name="./includebutton"> <span class=" coral3-Checkbox-checkmark" handle="checkbox"></span> <label class=" coral3-Checkbox-description" handle="labelWrapper" for="coral-id-726"> <coral-checkbox-label>Add button (bottom)</coral-checkbox-label> </label> </coral-checkbox> <div class="coral-Form-fieldwrapper"><label id="label_965366d9-e23a-4c07-88ab-ea55fe6cbd87" class="coral-Form-fieldlabel">Button Text</label><input class="coral-Form-field coral3-Textfield" type="text" name="./btntext" labelledby="label_965366d9-e23a-4c07-88ab-ea55fe6cbd87" data-foundation-validation="" data-validation="" is="coral-textfield" id="coral-id-730" aria-labelledby="label_965366d9-e23a-4c07-88ab-ea55fe6cbd87" aria-invalid="false"></div>