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

yii2 using HTML::checkboxlist get checked value in 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',
        ],
    ]
);

我可以return结果,问题是我无法获取我检查的数据。

下面是我的脚本代码:

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

当我选中第一个框时,它会得到值 1,但是当我选中第二个框时,它会 return 1,而它应该 return 值 2。当我取消选中第一个盒子然后它 returns 2.

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

我选中第一个框,

a = ["1"]

然后我勾选第二个方框

a = ["1","2"]

等等。

请帮助我。

一些你应该看的东西

  1. 当你勾选第二个checkbox时,有超过1个元素被选中,你需要遍历所有的checked boxes并使用jquery的[=12]推入一个数组=] 否则它将只是 return 第一个元素值。

  2. 您应该使用事件委托来绑定点击,请参阅Why

  3. 您通过 itemOptionscheckboxList() 提供 id,这在技术上是错误的,因为它会将相同的 id 分配给所有复选框,你会在 javascripthtml 中遇到奇怪的行为,你应该使用 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;
        },
    ]);