时间戳

首页 > 解决方案 > yii2 使用 HTML::checkboxlist 在 index.php 中获取检查值

javascript - yii2 使用 HTML::checkboxlist 在 index.php 中获取检查值

问题描述

我有一个要放入checkboxList.

$data = [
    ['id' => '1', 'name' => 'emel'],
    ['id' => '2', 'name' => 'makluman'],
    ['id' => '3', 'name' => 'memo'],
];

$list = ArrayHelper::map($data, 'id', 'name');

return Html::checkboxList(
    'roles',
    [],
    $list,
    [
        'itemOptions' => [
            'onclick' => 'myFunction()',
            'id' => 'check',
        ],
    ]
);

我可以返回结果，问题是我无法获取我检查的数据。

下面是我的脚本代码：

<script>
function myFunction() {
    result = $('input[type="checkbox"]:checked').val();
    console.log(result);
}
</script>

当我选中第一个框时，它会得到值 1，但是当我选中第二个框时，它会返回 1，而它应该返回值 2。当我取消选中第一个框时，它会返回 2。

我希望它保存在一个变量中。例如：

我选中第一个框，

a = ["1"]

然后我检查第二个框

a = ["1","2"]

等等。

请帮我。

标签： javascriptyii2yii2-advanced-app

解决方案

你应该看的几件事

  1. 选中第二个复选框时选择了多个元素，您需要迭代所有选中的框并使用 jquery 推送到数组中，$.each()否则它将只返回第一个元素值。

  2. 您应该使用事件委托进行绑定单击，请参阅Why。

  3. 您提供了一个idvia itemOptions，checkboxList()这在技术上是错误的，因为它会将相同的分配id给所有复选框，并且您将在使用它们时遇到奇怪的行为javascriptor html，您应该使用item接受回调function ($index, $label, $name, $checked, $value)并为每个输入提供唯一 ID的选项.

请参阅下面的代码如何使用以上所有内容

  • 在您的视图顶部添加以下内容

    $js = <<<JS
    function myFunction() {
        var result=[];

        $('input[type="checkbox"]:checked').each(function(index,checkbox){
            result.push($(checkbox).val());
        });

        console.log(result);
    }

    $(document).on("click",'input[type="checkbox"]',myFunction);

JS;
$this->registerJs($js, \yii\web\View::POS_READY);

  • 然后将复选框的代码更新到下面

    $data = [
    ['id' => '1', 'name' => 'emel'],
    ['id' => '2', 'name' => 'makluman'],
    ['id' => '3', 'name' => 'memo'],
];

$list = ArrayHelper::map($data, 'id', 'name');

echo Html::checkboxList('roles', [], $list, [
    'item' => function ($index, $label, $name, $checked, $value) {
        $return = '<label>';
        $return .= '<input type="checkbox" name="' . $name . '" value="' . $value . '" ' . $checked . ' id="check-' . $index . '" />';
        $return .= '<span>' . ucwords($label) . '</span>';
        $return .= '</label>';
        return $return;
    },
]);

推荐阅读