使用Javascript（而不是JQuery）计算一系列复选框，

Question

我目前正在开发一个用于在数据库上执行搜索查询的php脚本。 （下面是表格，编码和外观，后端是ZenCart 1.5.1（不是它应该重要））

<div style="float:left;width: 100%; border-top: 1px solid #000000;">
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="air" id="resources-air"><label class="checkboxLabel" for="resources-air">Air</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="all" id="resources-all"><label class="checkboxLabel" for="resources-all">All</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="chaos" id="resources-chaos"><label class="checkboxLabel" for="resources-chaos">Chaos</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="death" id="resources-death"><label class="checkboxLabel" for="resources-death">Death</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="earth" id="resources-earth"><label class="checkboxLabel" for="resources-earth">Earth</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="evil" id="resources-evil"><label class="checkboxLabel" for="resources-evil">Evil</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="fire" id="resources-fire"><label class="checkboxLabel" for="resources-fire">Fire</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="good" id="resources-good"><label class="checkboxLabel" for="resources-good">Good</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="life" id="resources-life"><label class="checkboxLabel" for="resources-life">Life</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="order" id="resources-order"><label class="checkboxLabel" for="resources-order">Order</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="void" id="resources-void"><label class="checkboxLabel" for="resources-void">Void</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="water" id="resources-water"><label class="checkboxLabel" for="resources-water">Water</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="infinity" id="resources-infinity"><label class="checkboxLabel" for="resources-infinity">Infinity</label></div>
</div>

我想做的是改变这一点，以便＆＃34; Air＆＃34;是1，＆＃34;所有＆＃34;是2，＆＃34;混沌＆＃34;是4，依此类推，取所有这些复选框的总和，并将其作为表单中的隐藏值应用，但从表格中即将制作的$ _GET中删除ufs_resources[]提交。 （原因是因为ZenCart具有清理功能，可清除搜索结果页面上URL中的任何非字母。）

我知道有一种方法可以用jQuery做到这一点，但我想尽可能避免这种情况，我希望避免发送ufs_resources[]进行处理。

有没有办法用＆＃34;开箱即用＆＃34; Javascript还是PHP？

Answer 1

// HTML
// this is the hidden textbox holding the checked values (or their sum)
<input type="hidden" name="chosen" id="chosen" value="" />

// JavaScript
// every checked checkbox is actually equal to (i+1)
var t = document.getElementsByName('ufs_resources[]'), a = [], i, sum = 0;
for(i = 0; i < t.length; i++) {
    // if(t[i].checked) a.push(i+1);
    if(t[i].checked) sum = sum + (i+1);
}
document.getElementById('chosen').value = sum; // join('a'); // 1,2,4,8

// PHP
// finally you can receive the content of the hidden textbox as a string (or sum)
// $chosen = explode(",", $_GET["chosen"]); // explode() may be omitted if you don't need an array
$chosen = $_GET["chosen"]; // if you need only the sum 
// of course, you may use POST method as well