如何在 JavaScript 中获取复选框值

Question

我需要在选中时获取复选框值的列表并将它们传递给输入。 但是，当我首先单击 checkall 时，我的值会重复。 请帮我。 谢谢。

我的代码

<input id="listvalue" name="selectedCB">
<input type="checkbox" onclick="toggle(this)" name="checkedAll" id="checkedAll" />
<div class="tycheck">
  <input type="checkbox" name="checkAll" value="2" class="checkSingle" />
  <input type="checkbox" name="checkAll" value="1" class="checkSingle" />
  <input type="checkbox" name="checkAll" value="3" class="checkSingle" />
</div>

$(document).ready(displayCheckbox);
    var idsArr = [];
    var displayField = $('input[name=selectedCB]');
    function toggle(source) {                    
        var checkboxes = document.querySelectorAll('.tycheck input[type="checkbox"]');
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i] != source)
                checkboxes[i].checked = source.checked;
            idsArr = [];
            $('#checkall').find('input[type=checkbox]:checked').each(function () {
                idsArr.push(this.value);
            });
            displayField.val(idsArr);                
        }
    }
    function displayCheckbox() {
        var checkboxes = $(".tycheck input[type=checkbox]");
        function printChecked() {
            var checkedIds = [];
            idsArr = [];
            // for each checked checkbox, add it's id to the array of checked ids
            checkboxes.each(function () {
                if ($(this).is(':checked')) {
                    idsArr.push($(this).attr('value'));
                    console.log(idsArr);
                }
                else {
                    var checkboxesallcheck = document.querySelectorAll('input[name="checkedAll"]');
                    for (var j = 0; j < checkboxesallcheck.length; j++) {
                        checkboxesallcheck[j].checked = false;

                    }
                }
                displayField.val(idsArr);
            });

        }
        $.each(checkboxes, function () {
            $(this).change(printChecked);
        })
    }

如何在选中时获取复选框值列表并将它们传递给输入。 :(

Answer 1

你可以试试这个：

 var idsArr = []; var displayField = $('input[name=selectedCB]'); var checkboxes = Array.from($(".tycheck input[type=checkbox]")); function toggle(source) { var values = checkboxes.map(x => { x.checked = source.checked; return source.checked ? x.value : ''; }).join(source.checked ? ',' : ''); displayField.val(values); } function printChecked() { var values = checkboxes.filter(x => x.checked).map(x => x.value); displayField.val(values); } $.each(checkboxes, function () { $(this).change(printChecked); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <input id="listvalue" name="selectedCB"> <input type="checkbox" onclick="toggle(this)" name="checkedAll" id="checkedAll" /> <div class="tycheck"> <input type="checkbox" name="checkAll" value="2" class="checkSingle" /> <input type="checkbox" name="checkAll" value="1" class="checkSingle" /> <input type="checkbox" name="checkAll" value="3" class="checkSingle" /> </div>

Answer 2

你可以这样做

1. 使用任何一种类型的javascript selector or JQuery selector
2. 没有必要使用Array或forloops 。所有函数已经存在于 jquery 概念中。为此，我们使用了Jquery.map
3. 对于下面，我只是创建了一个更改函数调用。 checker
4. 然后在 checkall 和普通检查事件中的复选框更改事件上调用该函数

 $(document).ready(function() { const elem = $('.tycheck input[type=checkbox]'); //select the checkbox elem elem.on('change', function() { checker(elem) //get the checked value list }) $('#checkedAll').on('change', function() { elem.prop('checked', $(this).is(':checked')) //for select all simply compare with checkall button checker(elem) }) }) function checker(elem) { let res = elem.map((i, item) => { if ($(item).is(':checked')) { return $(item).val() } }).get() $('#listvalue').val(res.toString()) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="listvalue" name="selectedCB"> <input type="checkbox" name="checkedAll" id="checkedAll" /> <div class="tycheck"> <input type="checkbox" name="checkAll" value="2" class="checkSingle" /> <input type="checkbox" name="checkAll" value="1" class="checkSingle" /> <input type="checkbox" name="checkAll" value="3" class="checkSingle" /> </div>