javascript復選框選中所有

Question

我正在使用全選按鈕，但是我對JavaScript不太熟悉，無法完成此部分。

本質上，我在頁面頂部有一個復選框，當您選中它時，它將遍歷並更改要檢查的表的每一行中的復選框。

我環顧了類似的問題，我知道我必須使用

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

這是我要選中表中所有復選框的復選框。

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

這是表格行的布局。

<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函數訪問表格行中的元素，但是當我選中該復選框時，我什么都無法工作。

這是我要做什么的圖片：

我試圖這樣做，以便當我選中左上方的復選框時，它會遍歷表格並選中右列中的所有復選框。

Answer 1

看看這個，我之前做過類似的事情，這為我帶來了竅門。 幾乎，您創建了一個包含所有輸入框的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);
    }
});

演示