html 多选框获取值数组,前端获取checkbox复选框的值 通过数组形式传递

本文介绍如何在HTML中通过多选框获取值,并以数组形式利用AJAX传递给后端。示例代码包括使用jQuery选择已选中的checkbox值,以及在Python Flask后端接收和处理这些值。

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

html代码:

应用一组

{% for peopel_1 in peopels_1 %}

{ { peopel_1.name }}

{% endfor %}

应用二组

{% for peopel_2 in peopels_2 %}

{ { peopel_2.name }}

{% endfor %}

class="btn btn-default">提交

js代码:

1 获取已选中的名字并放到数组中

var name_list = [];

$("input[name='people_name']:checked").each(function(){

name_list.push($(this).val)

});

2 利用ajax向后台传递form表单数据

$(".select_people").submit(function(event){

event.preventDefault();  // 阻止默认表单的action功能

var name_list = [];

$("input[name='people_name']:checked").each(function

### 实现多选框传递选择结果 在前端开发中,实现一个多选框并将用户的选择结果作为列表传递给服务器或其他组件是一项常见的需求。下面介绍一种基于 Vue.js 的解决方案。 #### 使用 `<template>` 和 `v-model` 绑定多选框状态 为了创建动态的多选框组,可以使用 Vue 提供的模板语法来渲染多个选项,并通过 `v-model` 指令绑定这些选项的状态到一个数组变量上[^1]: ```html <template> <div> <!-- 循环遍历 options 数组生成 checkbox --> <label v-for="(option, index) in options" :key="index"> <input type="checkbox" :value="option.value" v-model="selectedOptions"> {{ option.label }} </label> <!-- 显示已选中的项 --> <p>您选择了:</p> <ul> <li v-for="(item, idx) in selectedOptions" :key="idx">{{ item }}</li> </ul> <!-- 添加按钮提交所选项目 --> <button @click="submitSelection()">提交</button> </div> </template> ``` #### 定义数据和方法 接下来,在脚本部分定义必要的数据属性以及处理逻辑函数: ```javascript <script setup> import { ref } from 'vue'; // 初始化可选项列表 const options = [ { label: "苹果", value: "apple" }, { label: "香蕉", value: "banana" }, { label: "橙子", value: "orange" } ]; // 存储用户的勾选项 let selectedOptions = ref([]); function submitSelection() { console.log("Selected items:", selectedOptions.value); // 这里可以根据实际业务逻辑发送请求或将数据传送给其他组件 } </script> ``` 此代码片段展示了如何利用 Vue 的响应式特性轻松管理表单控件的状态。每当用户点击复选框时,`selectedOptions` 数组会自动更新以反映最新的选择情况[^2]。 当用户完成选择后点击“提交”,可以通过调用 `submitSelection()` 函数获取当前被选中的条目集合,并进一步执行相应的操作,比如向后台 API 发送 POST 请求携带该列表参数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值