Question

我想在选中复选框时为输入值添加+1。我试过这段代码，但在循环内部不起作用。我需要在php循环中完成这项工作，因此，只需要在连接的输入上工作。

这是我的代码

<div class="mix ">

        <div class="img-card">
          <img src="<?= $product->image_card ?>">
        </div>
        <p><?= $product->sub_title; ?></p>
        <div class="azione">
          <p>
            Check
            <input type="checkbox" name="PRD-<?= $product->sub_title ?>" id="<?= $product->sub_title ?>" value="SI" />
          </p>
            <div class="quantity-form">
              <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
                  <input class="contatore" type="number" min="0" name="QNT-<?= $product->sub_title ?>" value="0">
              <span class="tiny-button-form minus"><strong>–</strong></span>
          </div>
        </div>

并给我这个HTML：

<div class="mix">

        <div class="img-card">
          <img src="...">
        </div>
        <p>P Name</p>
        <div class="azione">
          <p>
            Check
            <input type="checkbox" name="PRD-name" id="P-ID" value="SI">
          </p>
            <div class="quantity-form">
              <span class="input-holder-form"><span class="tiny-button-form plus">+</span><span class="tiny-button-form plus">+</span>
                  <input class="contatore" type="number" min="0" name="QNT-NIA - front desk" value="0">
              <span class="tiny-button-form minus"><strong>–</strong></span>
          <span class="tiny-button-form minus"><strong>–</strong></span></span></div>
        </div>
      </div>

这是我的jQuery

$('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $(this).closest('.mix').addClass("checked");
        var $input = $('.mix.checked .contatore');
        var num = parseInt($input.val());
        var newNum = num + 1;
        $input.val(newNum);
    } else {
        $(this).closest('.mix').removeClass("checked");
        var $input = $('.mix .contatore');
        var num = parseInt($input.val());
        var newNum = num * 0;
        $input.val(newNum);
    }
});

当我点击复选框时，在输入数字上加1，当我点击复选框时，转到零。

但是如何让它只在连接的盒子上工作而不是在所有盒子上工作？

可能不必使用class checked，但我已尝试使用closest，find，children或parent

Answer 1

假设你有多组重复元素，位置选择器可以工作。

您的代码中的问题专门针对以下问题：

var $input = $('.mix.checked .contatore');

该行忽略了位置，只应该查看该类的closest元素，就像使用该行上面的行一样。

此外，您在函数旁边重新声明相同的变量。没必要那样做。我稍微清理了一下代码并修复了位置选择器。

您的示例代码中还缺少结束</span>，并且您没有发布超过1套，所以我必须编写自己的重复集，希望尽可能地匹配您的重复集。

下面的代码分别处理每个集合，只为与同一集合中的复选框匹配的输入添加+1，而不是为所有输入添加+1。

$('input:checkbox').change(function() {
  var $closestParent = $(this).closest('.mix'),
    $input = $closestParent.find('.contatore'),
    num = parseInt($input.val()),
    newNum

  if ($(this).is(":checked")) {
    $closestParent.addClass("checked");
    newNum = num + 1;
  } else {
    $closestParent.removeClass("checked");
    newNum = num * 0;
  }
  
  $input.val(newNum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mix ">

  <div class="img-card">
    <img src="http://via.placeholder.com/15x15">
  </div>
  <p>
    Some Product Title
  </p>
  <div class="azione">
    <p>
      Check
      <input type="checkbox" name="someProduct1" id="someId1" value="SI" />
    </p>
    <div class="quantity-form">
      <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
      <input class="contatore" type="number" min="0" name="someName1" value="0">
      <span class="tiny-button-form minus"><strong>–</strong></span></span>
    </div>
  </div>
</div>
<div class="mix ">

  <div class="img-card">
    <img src="http://via.placeholder.com/15x15">
  </div>
  <p>
    Some Product Title
  </p>
  <div class="azione">
    <p>
      Check
      <input type="checkbox" name="someProduct1" id="someId1" value="SI" />
    </p>
    <div class="quantity-form">
      <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
      <input class="contatore" type="number" min="0" name="someName1" value="0">
      <span class="tiny-button-form minus"><strong>–</strong></span></span>
    </div>
  </div>
</div>

Answer 2

这是我在上面的评论中所说的内容。使用id和属性data-id来触发并选择正确的字段。使用递增的id并将其作为data-id放置，这样你仍然可以在循环中使用计数器。

＆＃13;

$('input:checkbox').change(function() {
  var idVal = $(this).data('id');
  var inputVal = parseInt($('#input_'+idVal).val());
  if ($(this).is(":checked")) {
    inputVal+=1;
    $('#input_'+idVal).val(inputVal);
  } else {

    $('#input_'+idVal).val(0);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mix ">

  <div class="img-card">
    <img src="http://via.placeholder.com/15x15">
  </div>
  <p>
    Some Product Title
  </p>
  <div class="azione">
    <p>
      Check
      <input type="checkbox" name="someProduct1" id="someId1" value="SI" data-id="1"/>
    </p>
    <div class="quantity-form">
      <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
      <input class="contatore" id="input_1" type="number" min="0" name="someName1" value="0">
      <span class="tiny-button-form minus"><strong>–</strong></span></span>
    </div>
  </div>
</div>
<div class="mix ">

  <div class="img-card">
    <img src="http://via.placeholder.com/15x15">
  </div>
  <p>
    Some Product Title
  </p>
  <div class="azione">
    <p>
      Check
      <input type="checkbox" name="someProduct2" id="someId2" data-id="2" value="SI" />
    </p>
    <div class="quantity-form">
      <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
      <input class="contatore" id="input_2" type="number" min="0" name="someName2" value="0">
      <span class="tiny-button-form minus"><strong>–</strong></span></span>
    </div>
  </div>
</div>

<div class="mix ">

  <div class="img-card">
    <img src="http://via.placeholder.com/15x15">
  </div>
  <p>
    Some Product Title
  </p>
  <div class="azione">
    <p>
      Check
      <input type="checkbox" name="someProduct3" id="someId3" data-id="3" value="SI" />
    </p>
    <div class="quantity-form">
      <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
      <input class="contatore" id="input_3" type="number" min="0" name="someName3" value="0">
      <span class="tiny-button-form minus"><strong>–</strong></span></span>
    </div>
  </div>
</div>

＆＃13;

在php循环中单击以复选框时将1添加到输入值

2 个答案: