checkbox不选中不传值

发布于:2023-01-22 ⋅ 阅读:(11) ⋅ 点赞:(0) ⋅ 评论:(0)

不选中不传值

1. 方法一:只需要给checkbox元素添加data-default-value=“0” 表示未选中的默认值

<input class="form-check-input" name="top" value="1" data-default-value="0" type="checkbox" role="switch" id="top">

封装在公共函数里面,以后可以直接使用

var res = formcheck('.form2', $('.form2').serialize());
function formcheck(form_selector_str, serialize_data) {
    //  组装选择器
    let selector = form_selector_str + ' input[type=checkbox]:not(:checked)';
    //遍历没有选中的checkbox
    let $notchecked_obj = $(selector);
    // console.log($notchecked_obj);
    let temp = serialize_data;

    $notchecked_obj.each(function (index, element) {
        let value = $(element).attr('data-default-value');
        let key = $(element).attr('name');
        temp += '&' + $.param({[key]: value});
    });
    return temp;
}    

2. 方法二:根据W3C的规则未选中的checkbox和禁用的控件不是有效控件,不会被提交。但是可以在它之前定义一个同name名的hidden表单(注意先后顺序)。这种做法很巧妙。

<input type="hidden" name="status" value="0">
<input type="checkbox" name="status" value="1">

当checkbox未选中的时候,提交的是hidden表单,值0就被提交到服务器了。
当checkbox选中的时候,hidden和checkbox表单都被提交了,但是因为它们的name是一样的,所以hidden的值被checkbox覆盖了。所以就得到了数值1。

在PHP中,如果有多个name相同的表单,post到服务器,后台仅取最后一个表单的值。
而在ASP.NET中,会把这个多个表单的值合并成逗号分割的值。因此,这种方法用在PHP下更合适。

3. 方法三:绑定事件,选中时赋值选中值给hidden input框

<input type="checkbox" name="avatarUrl_header" value="1" onclick="javascript:document.getElementById('test').value=this.checked;" />
<input type="hidden" id="test" name="test" value="false"/>

本文为原创作品,转载请注明出处