我有一个要放入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,但是当我选中第二个框时,当它应返回值2时它将返回1。当我取消选中第一个框时,它将返回2。
我希望它保存在一个变量中。例如:
我选中第一个框,
a = ["1"]
然后我选中第二个框
a = ["1","2"]
以此类推。
请帮助我。
答案 0 :(得分:1)
您应该注意的几件事
当您选中第二个复选框时,有多个元素被选中,您需要迭代所有选中的复选框并使用jquery的$.each()
推入数组,否则它将仅返回第一个元素值。
您应使用事件委托进行绑定,请点击Why。
您正在通过id
向itemOptions
提供checkboxList()
,这在技术上是错误的,因为它将为所有复选框分配相同的id
在javascript
或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;
},
]);