javascript复选框选中所有

Question

I'm working on a check all button, but I'm a bit too unfamiliar with javascript to do this part.

Essentially, I have a checkbox at the top of the page, and when you check it, it goes through and changes a checkbox in each row of a table to be checked.

I've looked around at the similar questions and I know I have to use

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

This is the checkbox which I would like to have check all the boxes in the table.

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

This is the table row layout.

<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>

Edit: Here's what I'm currently working with(I'm not sure if this is really poorly set up, it's from a bunch of old code I've never touched before today). I've made some edits in the code above as well.

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

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

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

I've been able to access the element in the table row via the document.ready function, but I couldn't get anything to work when I checked the checkbox.

Here's a picture of what I'm trying to do:

I'm trying to make it so that when I check the checkbox on the top left, it goes through the table and checks all of the checkboxes in the right column.

Answer 1

Take a look at this I did a similar thing earlier and this did the trick for me. Pretty much, you create a div with all your input boxes and say to mark all of them as checked if the main one is clicked.

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

If you're talking about ~~~~.prop('checked', ...) , then you're talking about jQuery.

In that case if you want to check a checkbox you would want to provide an ID or class . If you don't want , well :

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

Answer 3

I ended up solving it using this.

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