javascript checkbox 全部勾选

Question

我正在研究一个全选按钮，但我对 javascript 不太熟悉，无法完成这部分。

本质上，我在页面顶部有一个复选框，当您选中它时，它会经过并更改要选中的 table 的每一行中的复选框。

我查看了类似的问题，我知道我必须使用

~~~~.prop('checked', ...)

这是我想要选中 table 中所有复选框的复选框。

    <div class="disc-opt" style="float:left">
        Adjust All            
        <div class="make-switch">
            <input type="checkbox" class="create-adjustments"  />
        </div>
    </div>

这是 table 行布局。

<tr class="<?= $data['adjusted'] ? "success" : "" ?>">
    <td>
       Stuff
    </td>
    <td><?= $data['products_name'] ?></td>
    <td><?= $data['total_final_quantity'] ?></td>
    <td><?= $data['total_onhand'] ?></td>
    <td><?= $data['difference'] ?> </td>
    <td><?= $data['difference_cost'] ?></td>
    <!-- The Checkbox to be changed -->
    <td class = "Adjustbox">
        <?php if(!$data['adjusted']): ?>
            <div class="make-switch">
                <input type="checkbox" name="adjust_products[]"
                                    value="<?= $products_id ?>">
            </div>
        <?php else: ?>
            Adjustment Complete
        <?php endif; ?>
    </td>
</tr>

编辑：这是我目前正在使用的东西（我不确定这是否真的设置得很差，它来自我今天之前从未接触过的一堆旧代码）。我也对上面的代码进行了一些修改。

function createAdjustments()
{
    if($("#create-adjustments").is(':checked'))
    {
        //turn all on
    } else {
        //turn all off
    }
}

$('#create-adjustments').change(function(e)
{
    createAdjustments();
});

$('#create-adjustments').trigger('change');

我已经能够通过 document.ready 函数访问 table 行中的元素，但是当我选中该复选框时我无法使用任何东西。

这是我正在尝试做的事情的图片：

我正在尝试做到这一点，以便当我选中左上角的复选框时，它会通过 table 并选中右栏中的所有复选框。

Answer 1

看看 this 我之前做过类似的事情，这对我有用。基本上，您创建一个 div 包含所有输入框，并说如果单击主要输入框，则将所有输入框标记为已选中。

HTML:

<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>

<div id="checkboxlist">

    <label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox4</label><br />

</div>

JAVASCRIPT:

$('.selectall').click(function() {
    if ($(this).is(':checked')) {
        $('div input').attr('checked', true);
    } else {
        $('div input').attr('checked', false);
    }
});

Answer 2

如果你在谈论 ~~~~.prop('checked', ...) ，那么你就是在谈论 jQuery。

在这种情况下，如果您想选中一个复选框，您需要提供 ID 或 class。如果你不想，好吧：

$(".make-switch input:checkbox:first").prop('checked',true)

Answer 3

我最终用这个解决了它。

if($("#create-adjustments").is(':checked'))
    {
        $("tr").find("td.box").find("div").find("div").prop('class', "switch-on switch-animate");
    } else {
        $("tr").find("td.box").find("div").find("div").prop('class', "switch-off switch-animate");

    }

Answer 4

<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>

<div id="checkboxlist">

    <label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox4</label><br />

</div>

$('.selectall').click(function() {     
    if ($(this).is(':checked')) {        
        $('#checkboxlist input[type="checkbox"').prop('checked', true);
    } else {
        $('#checkboxlist input[type="checkbox"').prop('checked', false);
    }
});

demo

javascript checkbox 全部勾选

javascript checkbox check all

html

javascript

checkbox

jquery