多选框的值传递

这是项目中的页面,由于是用一个字段的值去字典表中查找所以用这种方式


在做这个取值的时候,确实是用了不少无用方式,搞了好久比如一下几种方式都一一试过但是总是缺少些啥

1、获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();
2、 获取多个checkbox选中项
$('input:checkbox').each(function() {
        if ($(this).attr('checked') ==true) {
                alert($(this).val());
        }
});
3、设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
4、设置最后一个checkbox为选中值
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
5、根据索引值设置任意一个checkbox为选中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
6、选中多个checkbox同时选中第1个和第2个的checkbox
$('input:radio').slice(0,2).attr('checked','true');
7、根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');
8、删除Value=1的checkbox
$("input:checkbox[value='1']").remove();
9、删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
10、遍历checkbox
$('input:checkbox').each(function (index, domEle) {
//写入代码
});
11、全部选中
$('input:checkbox').each(function() {
        $(this).attr('checked', true);
});
12、全部取消选择
$('input:checkbox').each(function () {
        $(this).attr('checked',false);
});
js最后写得一塌糊涂,后来也不知咋搞得就来了思路其实就三行代码,


这样值就取到了,说一下字符串最后一个,会自动舍弃

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp中的多选框Checkbox)通常用于让用户选择多个选项,并将用户的选取作为数据传递给父组件或后端服务。要实现多选框的数据传递,你可以按照以下步骤操作: 1. 在`<template>`中定义一个多选框列表: ```html <view> <checkbox v-for="(item, index) in options" :key="index" :value="item.value" @change="onChange(item)"> {{ item.label }} </checkbox> </view> ``` 在这里,`options`是一个数组,包含了你想要提供的各个选项(label和value)。 2. 创建一个Vue实例方法处理`@change`事件,当用户点击某个选项时,这个方法会被调用: ```javascript data() { return { options: [ { label: '选项1', value: 1 }, { label: '选项2', value: 2 }, // ... 其他选项 ], selectedOptions: [] }; }, methods: { onChange(item) { if (item.checked) { this.selectedOptions.push(item.value); // 当前项被选中,添加到selectedOptions } else { const index = this.selectedOptions.indexOf(item.value); if (index !== -1) { this.selectedOptions.splice(index, 1); // 当前项未被选中,从selectedOptions中移除 } } } } ``` 3. `selectedOptions`数组会记录用户选择的所有值。当你需要将这些数据传给父组件或者API时,可以直接发送这个数组,例如通过`emit`事件: ```javascript onSubmit() { this.$emit('selectedOptionsChanged', this.selectedOptions); } ``` 然后在父组件或调用者那里接收并处理数据: ```javascript <template> <uni-app> <child-component @selectedOptionsChanged="handleSelectedOptions"></child-component> </uni-app> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, methods: { handleSelectedOptions(selectedOptions) { console.log('用户选择了:', selectedOptions); // 进行进一步的操作,如提交到服务器 }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值