如何使用 JavaScript 检查多个复选框? [英] How to check multiple checkboxes with JavaScript?

问题描述

我有多个复选框

<跨度><input name="employee" type="checkbox" value="Alex"/><label for="employee">Alex</label></span><跨度><input name="employee" type="checkbox" value="Frank"/><label for="employee">Frank</label></span><跨度><input name="employee" type="checkbox" value="Mark"/><label for="employee">Mark</label></span>

如何查找所有选中的复选框并创建带有检查结果的json或数组?

解决方案

如果你只想使用纯/vanilla JS，这里有一个例子:

HTML HEAD

HTML 正文

<跨度><input name="employee" type="checkbox" value="Alex"/><label for="employee">Alex</label></span><跨度><input name="employee" type="checkbox" value="Frank"/><label for="employee">Frank</label></span><跨度><input name="employee" type="checkbox" value="Mark"/><label for="employee">Mark</label></span><input type="button" onclick="alert(getCheckedCheckboxesFor('employee'));"value="获取值"/>

JS Fiddle 链接:http://jsfiddle.net/dY372/

I have multiple checkboxes

<div class="data">    
    <span>
    <input name="employee" type="checkbox" value="Alex"/>
    <label for="employee">Alex</label>
    </span> 

    <span>
    <input name="employee" type="checkbox" value="Frank"/>
    <label for="employee">Frank</label>
    </span>    

    <span>
    <input name="employee" type="checkbox" value="Mark"/>
    <label for="employee">Mark</label>
    </span>
</div>

How to find all checked checkboxes and create json or array with result of checking?

解决方案

In case you just want to use pure/vanilla JS, here is an example:

HTML HEAD

<script type="text/javascript">
function getCheckedCheckboxesFor(checkboxName) {
    var checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'), values = [];
    Array.prototype.forEach.call(checkboxes, function(el) {
        values.push(el.value);
    });
    return values;
}
</script>

HTML BODY

<div class="data">    
    <span>
    <input name="employee" type="checkbox" value="Alex"/>
    <label for="employee">Alex</label>
    </span> 

    <span>
    <input name="employee" type="checkbox" value="Frank"/>
    <label for="employee">Frank</label>
    </span>    

    <span>
    <input name="employee" type="checkbox" value="Mark"/>
    <label for="employee">Mark</label>
    </span>

    <input type="button" onclick="alert(getCheckedCheckboxesFor('employee'));" value="Get Values" />
</div>

JS Fiddle link: http://jsfiddle.net/dY372/

这篇关于如何使用 JavaScript 检查多个复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！