jQuery - 使用名称属性第一次单击时选中和取消选中第二个复选框答案

【问题标题】：jQuery - Check and uncheck the 2nd checkbox when first clicked using name attributejQuery - 使用名称属性第一次单击时选中和取消选中第二个复选框
【发布时间】：2016-08-30 15:19:38
【问题描述】：

我正在尝试在单击第一个（隐藏它）时自动检查第二个 checkobx（删除它！）？系统生成的 html 不包含复选框元素的任何 id 或类。我尝试以 name 属性为目标，但每次都失败。

jQuery(document).ready(function($){
    $("input:checkbox[name='eddhd']").click(function() {
        $(this).parents('.eddhrd::nth-child(2))').siblings("input:checkbox[name='eddhrd']").find('input:checkbox').attr("checked","checked");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="es-el eddhd">
    <div class="es-label">
        <label for="es-eddhd">Hide it</label>
        <br>
    </div>
    <div class="es-fields">
        <span data-required="no" data-type="radio"></span>
        <label>
            <input name="eddhd[]" value="Yes" type="checkbox"> Yes
        </label>
    </div>
</fieldset>
<fieldset class="es-el eddhrd">
    <div class="es-label">
        <label for="es-eddhrd">Delete it!</label>
        <br>
    </div>
    <div class="es-fields">
        <span data-required="no" data-type="radio"></span>
    <label>
        <input name="eddhrd[]" value="Yes" type="checkbox"> Yes
    </label>
    </div>
</fieldset>

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

您可以使用change 函数检查复选框是否为checked 而不是check 其他复选框，否则为uncheck。

$("input:checkbox[name='eddhd[]']").change(function () {
if ($(this).is(":checked"))
   $("input:checkbox[name='eddhrd[]']").attr("checked", "checked");
else
   $("input:checkbox[name='eddhrd[]']").attr("checked", false);
});

【讨论】：

【解决方案2】：

尝试跟随 sn-p。

$(document).ready(function($){
    $("input[name='eddhd[]']").change(function() {
        $("input[name='eddhrd[]']").prop("checked", $(this).is(":checked"));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="es-el eddhd">
    <div class="es-label">
        <label for="es-eddhd">Hide it</label>
        <br>
    </div>
    <div class="es-fields">
        <span data-required="no" data-type="radio"></span>
        <label>
            <input name="eddhd[]" value="Yes" type="checkbox"> Yes
        </label>
    </div>
</fieldset>
<fieldset class="es-el eddhrd">
    <div class="es-label">
        <label for="es-eddhrd">Delete it!</label>
        <br>
    </div>
    <div class="es-fields">
        <span data-required="no" data-type="radio"></span>
    <label>
        <input name="eddhrd[]" value="Yes" type="checkbox"> Yes
    </label>
    </div>
</fieldset>

【讨论】：

【解决方案3】：

您需要遍历 DOM 以从父元素 fieldset 的兄弟元素中找到复选框，然后使用 .prop('property', value) 设置选中的属性。

$(document).ready(function($) {
  $("input[name='eddhd[]']").change(function() {
      $(this) //Referes to current element
        .closest('.eddhd') //Target parent fieldset with eddhd class
        .next('.eddhrd') //Target immediate sibling
        .find("input[name='eddhrd[]']") //Find the checkbox
        .prop("checked", this.checked); //set the checked property
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="es-el eddhd">
  <div class="es-label">
    <label for="es-eddhd">Hide it</label>
    <br>
  </div>
  <div class="es-fields">
    <span data-required="no" data-type="radio"></span>
    <label>
      <input name="eddhd[]" value="Yes" type="checkbox">Yes
    </label>
  </div>
</fieldset>
<fieldset class="es-el eddhrd">
  <div class="es-label">
    <label for="es-eddhrd">Delete it!</label>
    <br>
  </div>
  <div class="es-fields">
    <span data-required="no" data-type="radio"></span>
    <label>
      <input name="eddhrd[]" value="Yes" type="checkbox">Yes
    </label>
  </div>
</fieldset>

【讨论】：

【解决方案4】：

如果我是对的，您想在更改另一个复选框时更改一个复选框的状态。正确的？？以下是单击第一个复选框时检查第二个复选框的示例代码。

$('.es-el.eddhd input[type=checkbox]').on('change', function() {
      $('.es-el.eddhrd input[type=checkbox]').attr('checked', 'checked');
})

【讨论】：

【解决方案5】：

试试这个

$("input:checkbox[name='eddhd[]']").on("click",function(){
       if($(this).prop("checked")){  
           $("input:checkbox[name='eddhrd[]']").prop("checked",true);
       } else{               
           $("input:checkbox[name='eddhrd[]']").prop("checked",false);
       }
    });

【讨论】：