Javascript 更改多模式弹出窗口上的默认单选按钮选中属性

默认情况下，Woocommerce为我的产品自定义布局提供选项。点击下面的按钮

我得到一个带有选项的弹出模式 默认产品

但是，无论web用户单击“大”，默认选择总是小尺寸。我已经附上演示代码，以展示问题和我的解决方案。我想使用JS删除页面加载时的默认选中项。然后单击按钮，大小将使用html上的数据键确定主要的膳食选择

问题：我的大按钮单击有效，但小按钮单击不会更改选中的值。如果您能提供帮助或采取其他措施，我们将不胜感激

window.onload=removePreSelection（）；
const clickBtns=Array.from（document.queryselectoral（'.defaultbtn'））；
clickBtn.forEach（clickBtn=>clickBtn.addEventListener（'click'，ClickedBTSelects））；
//删除第页上默认选择的单选按钮。
函数移除预选（）{
const inputs=document.querySelectorAll（'input[name=attribute\u pa\u size]：选中'）；
for（设i=0；i

大号：27500
大的


小型：23000
小的

选择大模态

大的


小的

选择小模态

大的


小的

试试这个用jQuery制作的工作版本，它更紧凑、更高效：

（函数（$）{
//变量初始化
变量a='按钮[数据便当^=“小”]，
b='按钮[数据便当^=“大”]，
c='input[value^=“small”]，
d='input[value^=“large”]；
$（a）。单击（函数（）{
var e=$（this.attr（'data-target'）+''+c；
log（$（this.attr（'data-target'））；
$（e）.prop（'checked'，true）；
});
$（b）。单击（函数（）{
var f=$（this.attr（'data-target'）+''+d；
log（$（this.attr（'data-target'））；
$（f）.prop（'checked'，true）；
});
})（jQuery）


大号：27500
大的


小型：23000
小的

选择大模态

大的


小的

选择小模态

大的


小的

我有一个使用jQuery的工作和测试版本，更加紧凑和高效。请试一试。谢谢。我愿意接受另一种选择，比如jQuery。谢谢