jquery 我需要根据复选框的选择修改锚标记参数的帮助

k7fdbhmy  于 2023-01-08  发布在  jQuery
关注(0)|答案(2)|浏览(93)

我正在尝试将选中复选框的值添加到锚标签参数“产品代码”和“产品数量”。例如,如果有人单击第一个复选框,产品代码参数将是类似于产品代码=“90; 1”且产品数量=“1”;并且如果某人还选中第二复选框,则产品代码参数将像product-code=“90; 1;2”且产品数量=“1; 1;1”。第三个参数也一样。有人能帮我一下吗?我怎么能在jquery的帮助下完成这个?

<input type="checkbox" name="Apple" value="1">
<input type="checkbox" name="Banana" value="2">
<input type="checkbox" name="Orange" value="3">

<a href="#buy" class="avangate_button btn btn-primary" product-code="90" product-quantity="1">Order Now!</a>
6ovsh4lw

6ovsh4lw1#

它很简单,你只需要创建两个变量,例如productCode和productQuantity,并把它放在锚标签上。2创建一个函数来设置上面变量的值,并在复选框的“onChange”事件上执行这个函数。

代码如下:

<input type="checkbox" name="Apple" value="1">
<input type="checkbox" name="Banana" value="2">
<input type="checkbox" name="Orange" value="3">

<a href="#buy" class="avangate_button btn btn-primary" product-code="90" 
product- 
quantity="1">Order Now!</a>

var productCode = "90";
var productQuantity = "1";

$("input[type=checkbox]").change(function(val){
productCode = productCode + ";" + val;
productQuantity = productQuantity + ";" + val;
});
xlpyo6sf

xlpyo6sf2#

下面的代码段应该可以做到这一点:

const a=document.querySelector("a");
const cbs=[...document.querySelectorAll("input[type=checkbox]")];
cbs.forEach(cb=>cb.addEventListener("click",ev=>{
  a.setAttribute("product-code",[90,...cbs.filter(c=>c.checked).map(c=>c.value)].join(";"));
  console.log(a);
}));
<input type="checkbox" name="Apple" value="1">
<input type="checkbox" name="Banana" value="2">
<input type="checkbox" name="Orange" value="3">

<a href="#buy" class="avangate_button btn btn-primary" product-code="90" 
product- 
quantity="1">Order Now!</a>

相关问题