Question

我在下面的代码中尝试实现“选择/取消选中”所有复选框。

复选框位于表主体内部。我无法弄清楚为什么未选中/取消选中复选框。但是选择/取消选择按钮的值会更改其值。

在Chrome 75上进行了测试

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Add / Remove Items Rows Dynamically</title>
<style type="text/css">
    form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 100%;
        margin-bottom: 20px;
        border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            var qty = $("#qty").val();
            var markup = "<tr><td><input type='checkbox' class='checkBoxClass' name='record'></td><td>" + name + "</td><td>" + qty + "</td></tr>";
            $("table tbody").append(markup);
        });

        // remove selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
                if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
        //submit button to implement
        $(".submit-row").click(function(){
            alert("items submitted");
            $("table tbody").find('input[name="record"]').each(function(){
                if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });

    //Implemented code, but does not work
    $(".checkAll").click(function() {
        if ($(this).val() == 'Check All') {
            $('.checkBoxClass input').prop('checked', true);
            $(this).val('Uncheck All');
        } else {
            $('.checkBoxClass input').prop('checked', false);
            $(this).val('Check All');
        }
    });

    });    
</script>
</head>
<body>
    <form>
        <input type="text" id="name" placeholder="Name">
        <input type="number" id="qty" placeholder="Quantity">
        <input type="button" class="add-row" value="Add Row">
    </form>
    <table id="tab1">
        <thead>
            <tr>
                <th>Select</th>
                <th>Name of the item</th>
                <th>Qty</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Row</button>
    <button type="button" class="submit-row">Submit selected Rows</button>
    <input type="button" id="checkAll" class="checkAll"  value="Check All" />
</body> 
</html>

Answer 1

这是因为您的选择器未选择输入。请这样做。

$(".checkAll").click(function() {
    if ($(this).val() == 'Check All') {
        $('input.checkBoxClass').prop('checked', true);
        $(this).val('Uncheck All');
    } else {
        $('input.checkBoxClass').prop('checked', false);
        $(this).val('Check All');
    }
});

你说

$('.checkBoxClass input')

这意味着“选择checkBoxClass分类元素内的所有输入”。

选择/取消选择所有按钮复选框不起作用

1 个答案: