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

Question

我有一些复选框和一些按钮文本字段。我希望如果单击复选框1，则应该出现按钮text1，如果单击复选框2，则应该出现按钮text2。

但我的问题是，当我单击 checkbox1 时，会自动显示 checkbox2 值（即按钮 text2）。我的代码如下。

如果我只有一个复选框和一个按钮文本，我的代码可以正常工作。但我正在寻找多字段复选框和按钮文本。

(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

你需要一些简单的东西，比如：

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