单击按钮创建表时获取值复选框

Question

如果有2个复选框列表和1个表格。然后底部的代码有javascript

<div class="mutiple-array-form">
    <form id="sampleTbl">
        <input type="checkbox" name="person" value="Ristha:30">Ristha - 30</input>
        <input type="checkbox" name="person" value="Kinen:35">Kinen - 35</input> 
    </form>
    <div class="form-group">
        <?= Html::button('Create',['class' => 'btn btn-success', 'id' => 'idOfButton']) ?>
    </div>
    <table id="sampleTbl", class="table table-striped table-bordered">
        <thead>
            <tr id="myRow">
                <th>Name</th>
                <th>Age</th>
            </tr> 
        </thead>
        <tbody>
            <tr>
                <td>william</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Muli</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Sukoco</td>
                <td>29</td>
            </tr>
        </tbody>
    </table>
</div>

在我的代码下面，这是我的Javascript代码：

<?php  
    $script = <<< JS
        $('#idOfButton').click(function(){
            ?????????????????
        });
    JS;
    $this->registerJs($script);
?>

我不知道如何填写javascript来设置我的值复选框以在我点击按钮时创建一个表格？

Answer 1

在按钮内单击使用如下：

$('[name="person"]:checked').each(function () {
        var arr = $(this).val().split(':');
        $('#sampleTbl tbody').append('<tr><td>' + arr[0] + '</td><td>' + arr[1] + '</td></tr>');
    });