如何在累加复选框选中值的JavaScript代码中使用自定义属性？

嘿，我来帮你搞定这个自定义属性不生效的问题！先看你代码里可能存在的几个小坑，咱们一步步修正：

问题分析 #

你尝试给复选框加othervalue自定义属性来存储数值，但没生效，大概率是这几个原因：

• 可能你的inputs变量没有正确获取到所有目标复选框
• 用jQuery的attr()方法没问题，但如果项目里没引入jQuery的话，这段代码直接就失效（这是很常见的疏漏！）
• 页面加载顺序问题：如果JS代码写在DOM元素之前，元素还没渲染就绑定事件，自然没效果

修正方案（原生JS版本，不依赖jQuery） #

我给你改成原生JS的写法，更稳妥，也能避开jQuery依赖的麻烦：

HTML部分 #

可以保留你的自定义属性写法，不过更推荐用HTML规范的data-*属性（比如data-othervalue），两种写法都能正常工作，这里给你两种示例：

<!-- 原自定义属性写法 -->
<input value="50" othervalue="800" type="checkbox" class="sum"> Instagram

<!-- 推荐的data属性写法（更符合HTML规范） -->
<input value="50" data-othervalue="800" type="checkbox" class="sum"> Instagram

JavaScript部分 #

// 确保DOM加载完成后再执行代码，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带.sum类的复选框
  const inputs = document.querySelectorAll('.sum');
  // 获取显示总和的元素（假设它的id是total，你可以根据实际情况修改）
  const total = document.getElementById('total');
  
  // 初始化总和，避免第一次计算出现NaN
  total.textContent = '0';

  // 给每个复选框绑定change事件
  inputs.forEach(input => {
    input.addEventListener('change', function() {
      // 方法1：获取原自定义属性othervalue
      const add = parseFloat(this.getAttribute('othervalue')) * (this.checked ? 1 : -1);
      
      // 方法2：如果用data-othervalue属性，就用下面这行
      // const add = parseFloat(this.dataset.othervalue) * (this.checked ? 1 : -1);
      
      // 更新总和，注意转成数字计算，避免字符串拼接
      const currentTotal = parseFloat(total.textContent);
      total.textContent = (currentTotal + add).toFixed(2); // 保留两位小数更美观
    });
  });
});

关键注意点 #

• DOM加载时机：一定要把JS代码放在DOMContentLoaded事件里，或者放在页面最底部，确保元素已经渲染完成再绑定事件
• 数值转换：自定义属性的值本质是字符串，必须用parseFloat()转成数字再计算，否则会变成字符串拼接出奇怪的结果
• HTML规范：虽然自定义属性（比如othervalue）能生效，但data-*属性是HTML官方推荐的自定义属性写法，兼容性更好，也更易维护

这样修改后，你的自定义属性就能正常被获取和参与计算啦！

内容的提问来源于stack exchange，提问作者LearnProgramming