关于<input type="checkbox" />取值的方法

本文介绍了一种使用jQuery简化获取多个复选框值的方法,并通过一个具体示例展示了如何将选择的值汇总并显示。

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

       现在很多地方都用得到 <input type="checkbox" /> 用于用户体验 对于怎么取这个后面的具体值 如:<input type="checkbox" /> 姓名    我要取这个姓名怎么取呢?

开始都会说给他一个id  不就很快能取到了 。这是可以,但是有多个呢,是不是也要写多个id重复写多次呢?这里我有个简单的实例:


              <div>
                    <input class="i1" type="checkbox" value="姓名" />姓名
                    <input class="i1" type="checkbox" value="性别"/>性别
                    <input class="s1" type="submit" value="tijiao" />
                </div>

                 <p id="p1"></p>

   假如我选到什么 点击提交的时候 要把值传到p里面去 ,这里有个简单的方法,使用JQ;

              $(".s1").click(function(){
                    var value="";
                    $(".i1").each(function() {    
                        if($(this).is(":checked")){
                            value=value+$(this).attr("value");

                        }
                    $("#p1").text(value+" ");
                    })   
                })

   这样 当我点击选择了就可以把值传到p里面去了。很快也很方便。。。

### 如何使用 LayUI 框架中的开关组件 LayUI 提供了一个简单而强大的方式来实现开关功能。以下是关于如何使用 LayUI 中的 `switch` 组件及其相关属性的具体说明。 #### 1. HTML 结构 要创建一个开关组件,首先需要定义相应的 HTML 元素。通常是一个带有特定类名的 `<input>` 标签,并设置其类型为 `checkbox`。为了使样式生效,还需要将其包裹在一个 `.layui-form-item` 容器中[^2]: ```html <div class="layui-form-item"> <label class="layui-form-label">状态</label> <div class="layui-input-block"> <input type="checkbox" name="status" lay-skin="switch" lay-filter="demoSwitch" lay-text="ON|OFF"> </div> </div> ``` - **lay-skin="switch"**: 表明这是一个开关类型的控件。 - **lay-filter="demoSwitch"**: 设置过滤器名称以便后续监听事件时识别该开关。 - **lay-text="ON|OFF"**: 自定义开/关状态下显示的文字内容。 #### 2. JavaScript 监听事件 当用户操作开关时,可以通过绑定事件来获取当前的状态以及其他相关信息。下面展示了如何利用 LayUI 的 API 来捕获这些数据并作出响应[^1]: ```javascript layui.use(['form'], function(){ var form = layui.form; // 开关改变时执行 form.on('switch(demoSwitch)', function(data){ console.log(this); // 当前 DOM 对象 (即 checkbox) console.log(data.elem); // 得到 checkbox 原始 DOM 对象 console.log(data.elem.checked); // 是否开启 true 或 false console.log(data.value); // 开关 value , 也可通过 data.elem.value 获取 console.log(data.othis); // 美化后的 DOM 对象 alert(`您已${data.elem.checked ? '打开' : '关闭'}了这个开关`); }); }); ``` #### 3. 动态赋取值 除了静态初始化外,还可以动态地给开关赋予初始或者读取出它的现有状态。这可通过调用 `form.val()` 方法完成[^4]: ```javascript // 赋示例 var formData = { status: true // 将开关设为开启状态 }; form.val('exampleForm', formData); // 取值示例 var currentValue = form.val('exampleForm'); console.log(currentValue.status); // 输出当前开关的状态 ``` 在这里需要注意的是 `'exampleForm'` 是表单的一个唯一标识符(通常是某个 filter 属性)。确保它在整个页面范围内具有唯一性。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值