获取表单复选框的多个值，并将它们放置在JavaScript中的单独变量中。

比如说，我这里有这个表格

<input type="checkbox" name="degree" value="certificate">Trade School/Certificate<br/>
<input type="checkbox" name="degree" value="aa">Associates Degree<br/>
<input type="checkbox" name="degree" value="ba">Bacholors Degree<br/>
<input type="checkbox" name="degree" value="masters">Masters Degree<br/>
<input type="checkbox" name="degree" value="dr">Doctors Degree<br/>

---

在纯javascript中是否有更简单或更好的方法实现此解决方案？提前感谢。

您可以将每个复选框的选中状态放入一个对象中，该对象按其

值进行索引：

var elements = document.getElementsByName('degree'),
    degrees  = {};

for (var i = 0, l = elements.length; i < l; i++) {
    degrees[elements[i].value] = elements[i].checked;
}

然后你可以这样使用它：

if (degrees.certificate) {
    currentPrice += 300;
}
if (degrees.ba) {
    currentPrice += 500;
}

HTML:

通过使用jQuery，您可以获得所有选择的带有name=“degree”的复选框，并对如下开关案例进行测试：

<input type="checkbox" name="degree" value="certificate">Trade School/Certificate<br/>
<input type="checkbox" name="degree" value="aa">Associates Degree<br/>
<input type="checkbox" name="degree" value="ba">Bacholors Degree<br/>
<input type="checkbox" name="degree" value="masters">Masters Degree<br/>
<input type="checkbox" name="degree" value="dr">Doctors Degree<br/>

function getPrice()
{
    currentPrice = 0;
    var inputs = $("input[name=degree]:checked");
    for(i=0;i<inputs.length;i++)
    {
        switch($(inputs[i]).val())
        {
            case "certificate":
                currentPrice += 100;
                break;
            case "aa":
                currentPrice += 100;
                break;
            case "ba":
                currentPrice += 100;
                break;
            case "masters":
                currentPrice += 100;
                break;
            case "dr":
                currentPrice += 100;
                break;
        }
    }
    return currentPrice;
}

商学院/证书

助理学位

学士学位

硕士学位

博士学位

函数getPrice（）
{
当前价格=0；
变量输入=$（“输入[名称=度]：选中”）；
对于（i=0；i您有几个选项，这取决于您如何组织和实现其余代码

使用价格模型
解决问题的一种方法是将价格模型保存在JavaScript中，并在单击复选框时循环通过复选框生成价格：

要检索值，可以执行以下操作：

var checkboxes = document.getElementsByTagName('INPUT');
for (var i = 0, n = checkboxes.length; i < n; i++) {
    checkboxes[i].onclick = updatePrice;
}

function updatePrice() {
    for (var price = 0, i = 0, n = checkboxes.length; i < n; i++) {
        if (checkboxes[i].checked) 
            price += +checkboxes[i].dataset.price; //unary plus intentional
    }

    document.getElementById('price').innerHTML = price;

    return true;
}

var复选框=document.getElementsByTagName（'INPUT'）；
对于（变量i=0，n=checkbox.length；i

这远不是代码，但您的值嵌入在HTML元素中，这可能是好的，也可能是坏的，这取决于您的工作方式和处理其他代码的计划。就个人而言，我可能会在服务器上管理模型，并将其动态加载到JSON对象中。数据也可能会从服务器和Angular.j生成s将起到减少HTML混乱的作用，但正如所说，没有错误的方法，只有比其他方法更好的方法。
jQuery不是必需的，我同意，但它总是有助于用更少的代码做更多的事情：）不总是：让我们考虑一下极端；代码高尔夫球是短的，但不实用的阅读或维护；早期的移动用户发现，性能确实是一个问题，你不应该采用你不需要的图书馆。我只建议jQuery，如果它已经在一个项目中的其他地方使用，它简化了结果代码。回答我已经在这里演示了VanillaJS比你的答案短，而且快得多。不管怎样，保留你的答案以确保问题的完整性，并欢迎你这么做。我说我同意，你在哪里不打架：）谢谢：）
<input type="checkbox" name="degree[]" value="certificate">Trade School/Certificate<br/>
<input type="checkbox" name="degree[]" value="aa">Associates Degree<br/>
<input type="checkbox" name="degree[]" value="ba">Bacholors Degree<br/>
<input type="checkbox" name="degree[]" value="masters">Masters Degree<br/>
<input type="checkbox" name="degree[]" value="dr">Doctors Degree<br/>

var myCheckboxes = new Array();
$("input[name='degree[]']:checked").each(function() {
   myCheckboxes.push($(this).val());
});

<input type="checkbox" name="degree" value="certificate">Trade School/Certificate<br/>
<input type="checkbox" name="degree" value="aa">Associates Degree<br/>
<input type="checkbox" name="degree" value="ba">Bacholors Degree<br/>
<input type="checkbox" name="degree" value="masters">Masters Degree<br/>
<input type="checkbox" name="degree" value="dr">Doctors Degree<br/>

function getPrice()
{
    currentPrice = 0;
    var inputs = $("input[name=degree]:checked");
    for(i=0;i<inputs.length;i++)
    {
        switch($(inputs[i]).val())
        {
            case "certificate":
                currentPrice += 100;
                break;
            case "aa":
                currentPrice += 100;
                break;
            case "ba":
                currentPrice += 100;
                break;
            case "masters":
                currentPrice += 100;
                break;
            case "dr":
                currentPrice += 100;
                break;
        }
    }
    return currentPrice;
}

<label><input type="checkbox" name="degree" value="certificate" />Trade School/Certificate</label>
<label><input type="checkbox" name="degree" value="aa" />Associates Degree</label>
<label><input type="checkbox" name="degree" value="ba" />Bacholors Degree</label>
<label><input type="checkbox" name="degree" value="masters" />Masters Degree</label>
<label><input type="checkbox" name="degree" value="dr" />Doctors Degree</label>
<div>Price is: <span id="price">0</span></div>

var checkboxes = document.getElementsByName('degree'),
    price_of = {
        certificate: 100,
        aa: 200,
        ba: 300,
        masters: 400,
        dr: 500
    };

// bind click event
for (var i = 0, n = checkboxes.length; i < n; i++) {
    checkboxes[i].onclick = updatePrice;
}

function updatePrice() {
    // generate the price
    for (var i = 0, n = checkboxes.length, price = 0; i < n; i++) {
        if (checkboxes[i].checked)
            price += price_of[checkboxes[i].value];
    }

    // display it in the browser
    document.getElementById('price').innerHTML = price;

    // ensure checkbox gets checked
    return true;
}

<label><input type="checkbox" name="degree" value="masters" data-price="400" />Master's Degree</label>
<label><input type="checkbox" name="degree" value="doctors" data-price="500" />Doctor's Degree</label>
<div>Price is: <span id="price">0</span></div>

var checkboxes = document.getElementsByTagName('INPUT');
for (var i = 0, n = checkboxes.length; i < n; i++) {
    checkboxes[i].onclick = updatePrice;
}

function updatePrice() {
    for (var price = 0, i = 0, n = checkboxes.length; i < n; i++) {
        if (checkboxes[i].checked) 
            price += +checkboxes[i].dataset.price; //unary plus intentional
    }

    document.getElementById('price').innerHTML = price;

    return true;
}