选中生成表中的所有复选框答案

【问题标题】：Select all checkboxes in generated table选中生成表中的所有复选框
【发布时间】：2017-02-09 09:45:12
【问题描述】：

我需要选中生成表中的所有复选框。我已经使用了这个 jquery 代码，但它似乎不起作用。显示复选框。对不起这个凌乱的代码，但我不确定什么是重要的，什么不是。谢谢大家的帮助

<input type="checkbox" id="selectAll" />
    <table>
        <tbody>
            <tr class='edit_row'>
                <input type='hidden' name='fields[]' value='<?php echo $field_id; ?>' />
                <td><label class='edit_label' for='<?php echo $name; ?>'><?php echo $label; ?></label></td>
                <td>
<?php if ($type == 'checkbox') {  ?>
<?php   $checked = ($value == 'checked') ? " checked='checked'" : ''; ?>
                    <label>
                        <input id='<?php echo $name; ?>' class='edit_checkbox' type='checkbox' name='<?php echo $name; ?>' value='checked'<?php echo $checked; ?> />
                    </label>
<?php } elseif ($type == 'date') { ?>   
                    <input id='<?php echo $name; ?>'<?php echo $class; ?> type='text' name='<?php echo $name; ?>' value='<?php echo $value; ?>' />
<?php } elseif ($type == 'radio') { ?>                      
                    <?php $this->radio_buttons($field_id, $name, $value, $required); ?>                 
<?php } elseif ($type == 'select') { ?>     
                    <select id='<?php echo $name; ?>'<?php echo $class; ?> name='<?php echo $name; ?>'>
                        <?php $this->select_options($field_id, $value); ?>
                    </select>
<?php } elseif ($type == 'text') { ?>
                    <input id='<?php echo $name; ?>'<?php echo $class; ?> type='text' name='<?php echo $name; ?>' value='<?php echo $value; ?>' />
<?php } elseif ($type == 'textarea') {  ?>
                    <textarea id='<?php echo $name; ?>'<?php echo $class; ?> name='<?php echo $name; ?>'><?php echo $value; ?></textarea>                           
<?php } ?>
                </td>
                <td>
<?php if ($required) { ?>
                    <span class='required_input'><?php _e('Required', CA_PLUGIN_NAME); ?></span>
<?php } ?>
                </td>
            </tr>
<?php } ?>
        </tbody>
    </table>
<script>

    $( document ).ready(function() {
        $('#selectAll').click(function(e){
            var table= $(e.target).closest('table');
            $('td input:checkbox',table).prop('checked',this.checked);
        });
    console.log( "I'm alive!" );
});

</script>
<?php //END

更新

这是我现在使用的代码。可悲的是，它仍然无法正常工作

<input type="checkbox" id="selectAll" />
    <table>
        <tbody>
<?php
            <tr class='edit_row'>
                <input type='hidden' name='fields[]' value='<?php echo         $field_id; ?>' />
                <td><label class='edit_label' for='<?php echo $name; ?>'><?    php echo $label; ?></label></td>
                <td>
<?php if ($type == 'checkbox') {  ?>
<?php   $checked = ($value == 'checked') ? " checked='checked'" : ''; ?>
                    <label>
                        <input id='<?php echo $name; ?>'     class='edit_checkbox checkBoxClass' type='checkbox' name='<?php echo $name; ?>'     value='checked'<?php echo $checked; ?> />
                    </label>
                </td>
            </tr>
<?php } ?>
        </tbody>
</table>
<script>

    $( document ).ready(function() {
        $("#selectAll").click(function () {
            $(".checkBoxClass").prop('checked', $(this).prop('checked'));
        });

    console.log( "ready!" );
});

</script>

【问题讨论】：

在 OP 中添加渲染的 html 而不是代码 html

标签： php jquery checkbox

【解决方案1】：

试试下面的代码。肯定行得通。

$("#selectAll").click(function () {
    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
});

【讨论】：

谢谢，问题很简单... jquery 是在代码之后加载的。啊，真是个愚蠢的错误：D ...

【解决方案2】：

为此，首先，您需要将一个通用类推送到该表的所有复选框中。

然后编写jquery代码

  $(document).ready(function(){
   $("#selectAll").click(function(){
           $(".commonClass").prop('checked',$(this).prop('checked'));
       });
  })

【讨论】：

感谢您解释我需要用 commonClass 标记复选框。这是卵子，但有时.... :)

【解决方案3】：

使用这个希望它的工作。

$(document).on('change', '#selectAll', function(e) {
    if($(this).prop('checked')){
      $('.checkBoxClass').prop('checked', true);
    }else{
      $('.checkBoxClass').prop('checked', false);
    }
});

【讨论】：

【解决方案4】：

正确选择你的表，表不是父级而是兄弟级

 var table= $(this).next('table');

【讨论】：

【解决方案5】：

我在 http://api.jquery.com/prop/ 上找到了以下内容，这对我有用。

$(document).ready(function(){
    $( "input" ).prop( "checked", true );
});

并编辑了两个按钮，一个用于全选，一个用于取消全选。

$(document).ready(function(){
    // select all checkboxes
    $("#selectAll").click(function () {
        $( ".checkSpecialties" ).prop( "checked", true );
    });

    // deselect all checkboxes
    $("#selectNone").click(function () {
        $( ".checkSpecialties" ).prop( "checked", false );
    }); 
});

【讨论】：