单击按钮时,使用jQuery选中表单的n个复选框

qncylg1j  于 2023-02-08  发布在  jQuery
关注(0)|答案(1)|浏览(111)

我尝试创建一个按钮,将选中n复选框,其中n被定义为按钮data-num="2"中的数据属性。我看到一个类似的问题here,我尝试使用jQuery解决方案,但它不工作。
我错过了什么?我做了什么:
1.首先,所有输入均未选中。
1.单击按钮时,我读取其数据属性。
1.然后,我尝试达到输入(类型复选框)不是所有的,但那些是在这个按钮下。
1.使用slice检查这些输入

var selectFirst = 0;
$('.selectFirstN').on('click', function() {
  selectFirst = $(this).data('num');
  console.log("Here selectFirstN = " + selectFirst);
  $(this).parent('.search-inputs').find('.checkboxfind').slice(0, selectFirst).prop("checked", true);

  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row mb-4 selectBtns">
  <div class="col-md-10 col-12 search-inputs">
    <div class="row justify-content-around">
      <div class="col">
        <p class="font-weight-bold mb-0">Title - 01</p>
      </div>
      <div class="col">
        <button class="btn btn-dark float-right selectFirstN" data-num="2">Select</button>
      </div>
    </div>

    <label id="PO-04419_1" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="1">           
            <span>PO-04419_1</span>
        </label>

    <label id="PO-04419_2" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="2">           
            <span>PO-04419_2</span>
        </label>

    <label id="PO-04419_3" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="3">           
            <span>PO-04419_3</span>
        </label>

    <label id="PO-04419_4" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="4">           
            <span>PO-04419_4</span>
        </label>
  </div>
</div>

<div class="row mb-4 selectBtns">
  <div class="col-md-10 col-12 search-inputs">
    <div class="row justify-content-around">
      <div class="col">
        <p class="font-weight-bold mb-0">Title - 02</p>
      </div>
      <div class="col">
        <button class="btn btn-dark float-right selectFirstN" data-num="3">Select</button>
      </div>
    </div>

    <label id="PO-04419_1" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="1">           
            <span>PO-04420_1</span>
        </label>

    <label id="PO-04419_2" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="2">           
            <span>PO-04420_2</span>
        </label>

    <label id="PO-04420_3" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="3">           
            <span>PO-04419_3</span>
        </label>

    <label id="PO-04420_4" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="4">           
            <span>PO-04419_4</span>
        </label>
  </div>
</div>
mspsb9vt

mspsb9vt1#

选择/祖先时出现问题
使用parentsclosest代替parent
Check here

var selectFirst = 0;
$('.selectFirstN').on('click', function() {
  selectFirst = $(this).data('num');
  console.log("Here selectFirstN = " + selectFirst);
  $(this).parents('.search-inputs').find('.checkboxfind').slice(0, selectFirst).prop("checked", true);

  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row mb-4 selectBtns">
  <div class="col-md-10 col-12 search-inputs">
    <div class="row justify-content-around">
      <div class="col">
        <p class="font-weight-bold mb-0">Title - 01</p>
      </div>
      <div class="col">
        <button class="btn btn-dark float-right selectFirstN" data-num="2">Select</button>
      </div>
    </div>

    <label id="PO-04419_1" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="1">           
            <span>PO-04419_1</span>
        </label>

    <label id="PO-04419_2" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="2">           
            <span>PO-04419_2</span>
        </label>

    <label id="PO-04419_3" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="3">           
            <span>PO-04419_3</span>
        </label>

    <label id="PO-04419_4" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="4">           
            <span>PO-04419_4</span>
        </label>
  </div>
</div>

<div class="row mb-4 selectBtns">
  <div class="col-md-10 col-12 search-inputs">
    <div class="row justify-content-around">
      <div class="col">
        <p class="font-weight-bold mb-0">Title - 02</p>
      </div>
      <div class="col">
        <button class="btn btn-dark float-right selectFirstN" data-num="3">Select</button>
      </div>
    </div>

    <label id="PO-04419_1" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="1">           
            <span>PO-04420_1</span>
        </label>

    <label id="PO-04419_2" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="2">           
            <span>PO-04420_2</span>
        </label>

    <label id="PO-04420_3" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="3">           
            <span>PO-04419_3</span>
        </label>

    <label id="PO-04420_4" class="btn btn-block btnclick btn-light hideBoxInCheckbox text-left mb-3">
            <input type="checkbox" name="mesId" class="checkboxfind" value="4">           
            <span>PO-04419_4</span>
        </label>
  </div>
</div>

相关问题