checkbox给后台传值以及后台处理值

本文介绍了一个使用HTML复选框收集用户选择的水果类型,并通过JavaScript的AJAX调用将这些数据发送到后端进行处理的例子。后端接收前端发送的数据,将其解析并用于SQL查询条件的构建,实现动态数据筛选。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1,前端界面

               <li>
                    <label class="control-label">水果分类</label>
                </li>
                <li class="checkbox" style="border-right: 1px solid #ededed;">
                    <label><input type="checkbox" name="fruit" value="1" />苹果</label>
                    <label><input type="checkbox" name="fruit" value="2" />香蕉</label>
                    <label><input type="checkbox" name="fruit" value="4" />葡萄</label>
                    <label><input type="checkbox" name="fruit" value="3" />榴莲</label><br/>
                    <label><input type="checkbox" name="fruit" value="9" />其他</label>
                </li>

2,前端js发送ajax

<script language="JavaScript">

function  search(){

       var fruit= '';
        var dd = '';
        var radio = document.getElementsByName("fruit");
        for(var i = 0;i<radio.length;i++)
        {
            if(radio[i].checked==true)
            {dd = radio[i].value;
             fruit= fruit+","+dd;
            }
        } 

$.ajax({ 
              type:"POST", 
              url:"${rc.getContextPath()}/realtime/tuberRegistTreat/data.do", 
              dataType:"json", 
              data:{"fruit":fruit}, 
              success:function(data){ 
                  debugger;
                  var dataList = "";
                data.forEach(function (t) {
                    dataList += "<tr><td class='same'>"+t[0]['AREA']+"</td>"
                    +"<td class='same'>"+t[1]['sum']+"</td>"
                    </tr>";
                });
                $('tbody').html(dataList);
              }, 
              error:function(){ 
                console.log("error") 
              } 
            })  

}

</script>

3,后端处理

// 数据处理
    @RequestMapping(value = "data", method = RequestMethod.POST)
    @ResponseBody
    public List<Object> data(ModelMap modelMap, HttpServletRequest req, String fruit){

if (StringUtils.isNotBlank(fruit)) {
            String[] reStrings = fruit.split(",");
            sb += " and (";
            for (int i = 0; i < reStrings.length; i++) {
                if(reStrings[i]!=""){
                    if(i==1){
                        sb += "A.REGISTERTYPE = '" + reStrings[1] + "'"; 
                    }
                    if(i>1){
                        sb += " or A.REGISTERTYPE = '" + reStrings[i] + "'";
                    }
                }
            }
            sb += ")";
        }
        return sb;
    }

}

结束:这样前端复选框传过来的值就能被分别拼入sql语句(如:select * from table t where t.fruit='1' or t.fruit='2'的形式)

当用户勾选或取消勾选一个 checkbox 时,可以通过绑定 change 事件来监听并处理这个操作。在 change 事件的处理函数中,可以通过事件对象 event 来获取当前 checkbox和是否被勾选。可以将这些存储到一个数组中,最后将这个数组作为参数递给后台接口。 下面是一个示例代码: 1. 在 wxml 文件中: ```html <checkbox-group bindchange="checkboxChange"> <label wx:for="{{checkboxItems}}" wx:key="{{index}}"> <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox> </label> </checkbox-group> ``` 2. 在 js 文件中: ```javascript Page({ data: { checkboxItems: [ { name: '选项1', value: '1', checked: false }, { name: '选项2', value: '2', checked: false }, { name: '选项3', value: '3', checked: false }, ], checkedValues: [] }, checkboxChange: function(e) { const values = e.detail.value; const items = this.data.checkboxItems; const checkedValues = []; for (let i = 0, lenI = items.length; i < lenI; ++i) { items[i].checked = false; for (let j = 0, lenJ = values.length; j < lenJ; ++j) { if (items[i].value === values[j]) { items[i].checked = true; checkedValues.push(values[j]); break; } } } this.setData({ checkboxItems: items, checkedValues: checkedValues }); // 将 checkedValues 递给后台接口 console.log('checkedValues: ', checkedValues); } }) ``` 在上面的示例中,我们通过一个数组 checkboxItems 来保存所有的 checkbox 选项,并且设置了一个 checkedValues 数组来保存用户勾选的。在 checkboxChange 函数中,我们首先获取到用户勾选的 values,然后遍历 checkboxItems 数组,将所有的 checked 属性设置为 false。接着再遍历 values 数组,将对应的 checkbox 的 checked 属性设置为 true,并将它的 value 添加到 checkedValues 数组中。最后通过 setData 函数将更新后的 checkboxItems 和 checkedValues 保存到页面的数据中。同时,我们可以将 checkedValues 数组递给后台接口来完成数据的提交。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值