Javascript 在php循环中单击复选框时向输入值添加1

我希望在选中复选框时向输入值添加+1。我已经尝试过这段代码，但在a循环中不起作用。我需要在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>

当我点击复选框时，将1添加到输入数字，当我点击复选框时，将变为零

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

---

可能不必使用选中的

类

，但我已经尝试使用

最近的

、

查找

、

子项

或

父项

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

您代码中的问题具体如下：

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

该行忽略位置，应该只查看与该类最近的

元素，就像您在该类上方的行中看到的一样

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

在示例代码中，您还缺少一个结束语
，并且您发布的内容不超过1组，因此我必须创建自己的重复集，希望尽可能与您的重复集匹配

下面的代码单独处理每个集合，仅将+1添加到与同一集合中的复选框匹配的输入，而不是将+1添加到所有输入


$（'input:checkbox'）。更改（函数（）{
var$closestParent=$（this）.closest（'.mix'），
$input=$closestParent.find（'.contatore'），
num=parseInt（$input.val（）），
纽纳姆
如果（$（this）.is（“：checked”））{
$closestParent.addClass（“选中”）；
newNum=num+1；
}否则{
$closestParent.removeClass（“选中”）；
newNum=num*0；
}
$input.val（newNum）；
});


一些产品名称


检查

+
–

一些产品名称


检查

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

您代码中的问题具体如下：

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

该行忽略位置，应该只查看与该类最近的
元素，就像您在该类上方的行中看到的一样

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

在示例代码中，您还缺少一个结束语
，并且您发布的内容不超过1组，因此我必须创建自己的重复集，希望尽可能与您的重复集匹配

下面的代码单独处理每个集合，仅将+1添加到与同一集合中的复选框匹配的输入，而不是将+1添加到所有输入


$（'input:checkbox'）。更改（函数（）{
var$closestParent=$（this）.closest（'.mix'），
$input=$closestParent.find（'.contatore'），
num=parseInt（$input.val（）），
纽纳姆
如果（$（this）.is（“：checked”））{
$closestParent.addClass（“选中”）；
newNum=num+1；
}否则{
$closestParent.removeClass（“选中”）；
newNum=num*0；
}
$input.val（newNum）；
});


一些产品名称


检查

+
–

一些产品名称


检查

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


$（'input:checkbox'）。更改（函数（）{
var idVal=$（this.data（'id'）；
var inputVal=parseInt（$（'#input_'+idVal）.val（））；
如果（$（this）.is（“：checked”））{
inputVal+=1；
$（'#input_'+idVal）.val（inputVal）；
}否则{
$（'#input'+idVal）.val（0）；
}
});


一些产品名称


检查

+
–

一些产品名称


检查

+
–

一些产品名称


检查

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


$（'input:checkbox'）。更改（函数（）{
var idVal=$（this.data（'id'）；
var inputVal=parseInt（$（'#input_'+idVal）.val（））；
如果（$（this）.is（“：checked”））{
inputVal+=1；
$（'#input_'+idVal）.val（inputVal）；
}否则{
$（'#input'+idVal）.val（0）；
}
});


一些产品名称


检查

+
–

一些产品名称


检查

+
–

一些产品名称


检查

+
–
您的
else
条件逻辑有点奇怪。它只会导致值
0
…当您执行
x*0
时，它将始终
=0
。因此，当您取消选中复选框时，它将变为零。您只需要在每个复选框和输入字段中添加id或特定类。这比在else场景中使用
$（'input:checkbox'）
要容易得多，我想他们只是感到困惑
var $input = $('.mix.checked .contatore');