Question

我有一堆复选框，点击后将其值传递给文本区域。然后，我有一个复选框，单击时选中所有其他复选框。这一切都很好。我想要做的是在单击全部选中时复选框执行其功能。它目前有效，但只有在我刷新页面时才有效。我希望在点击全部选择时发生这种情况。

这是我到目前为止所玩的内容：

    function setAllCheckboxes(divId, sourceCheckbox) {
    divElement = document.getElementById(divId);
    inputElements = divElement.getElementsByTagName('input');
    for (i = 0; i < inputElements.length; i++) 
$('.checkbox').each(function() {
                this.checked = true;
                 this.click();              
            });
{
        if (inputElements[i].type != 'checkbox')
            continue;
        inputElements[i].checked = sourceCheckbox.checked;
    }
}

Answer 1

如果你已经在使用jQuery，你可以在没有循环的情况下使用jQuery的.on() / .trigger() / .change()：

var $result = $('.js-result');
var $checkboxes = $('.js-checkbox');
$checkboxes.on('change', function(e) {
    var $checkbox = $(e.target);
    $result.append(
        '<div>' +
        $checkbox.closest('.js-label').text() + ' is ' +
        ($checkbox.prop('checked') ? 'checked' : 'unchecked') +
        '</div>'
    );
});
$('.js-button').on('click', function() {
    var $this = $(this);
    $checkboxes.prop('checked', !$this.data('checked'));
    $checkboxes.trigger('change');
    $this.data('checked', !$this.data('checked'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="js-label">
    <input type="checkbox" class="js-checkbox"/>
    Checkbox 1
</label>
<label class="js-label">
    <input type="checkbox" class="js-checkbox"/>
    Checkbox 2
</label>
<label class="js-label">
    <input type="checkbox" class="js-checkbox"/>
    Checkbox 3
</label>
<button type="button" class="js-button">Check/uncheck all</button>

<div class="js-result"></div>

JSFiddle

Answer 2

应该使用onchange事件处理CheckBox。在代码下面，只要以编程方式检查复选框，我就会触发一个事件。

以下代码可以帮助您

list = [1,2,3,4]
x = 4
count = 0
for i in list:
    if (i == x):
        count += 1

Answer 3

如果您只使用java脚本。下面是一个非常简单的运行示例。这种消耗很短的时间而不使用外部库作为JQuery

HTML代码

<html>
    <head>
        <title>test</title>
        <script>
function amend(a)
{
document.getElementById("ta").value += a;
}

function checkAll()
{
var textboxes = document.getElementsByClassName("cb");
for(i=0;i<textboxes.length;i++)
{
textboxes[i].checked=true;
textboxes[i].onchange();
}

}

        </script>
    </head>
    <body>
        <textarea rows="4" cols="50" id="ta">
                Below the outputs
        </textarea>
        <div id="checkdiv">
            <input type="checkbox" onChange="amend(this.value)" value="data to add 1" class="cb">First</input>
            <br>
            <input type="checkbox" onChange="amend(this.value)" value="data to add 2" class="cb">Second</input>
            <br>
            <input type="checkbox" onChange="amend(this.value)" value="data to add 3" class="cb">Third</input>
            <br>
            <input type="checkbox" onChange="checkAll()">Check all</input>
        </div>
    </body>
</html>

复选框选择取消全选并执行功能

3 个答案: