yii2 using HTML::checkboxlist get checked value in index.php

Question

I have a list of data that I want to put in a 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',
        ],
    ]
);

I can return the result, the problem is I can't get the data that I checked.

Below is my script code:

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

When I check the first box it will get the value 1, but when I check the second box it will return 1 when it's supposed to return the value 2. When I uncheck the first box then it returns 2.

I want it to save in one var. For example:

I check first box,

a = ["1"]

then I check the second box

a = ["1","2"]

and so on.

Please help me.

Muhammad Omer Aslam · Accepted Answer · 2020-02-12 23:31:14Z

Few things you should look at

There are more than 1 elements being selected when you check the second checkbox, you need to iterate all the checked boxes and push into an array by using jquery's $.each() otherwise it will just return the first element value.
You should use event delegation for binding click see Why.
You are providing an id via itemOptions to the checkboxList() which is technically wrong as it would assign that same id to all the checkboxes and you will be experiencing strange behaviors working with them in javascript or html, you should use the item option which takes a callback function ($index, $label, $name, $checked, $value) and provide unique ids to every input.

See the below code how to use all of the above

On top of your view add the following

$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);

Then update the code for your checkbox to below

$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;
    },
]);

Collectives™ on Stack Overflow

yii2 using HTML::checkboxlist get checked value in index.php

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related