Jquery获取同名input的值的最好方式

本文介绍了一个使用JavaScript前端获取复选框选中项的值并发送到后端的方法。后端采用ThinkPHP框架实现批量更新数据库操作,通过动态SQL语句为每个ID设置对应的排序值。
function getValue(){
  var idList='';
  idList=$('input[name="idList"').map(function(){ return $(this).val(); }).get();
  alert(idList);
}

后台批量update数据

public function saveSort(){
        $rs=array();
        $rs['status']=-1;
        $idList=I('idList');
        for ($i=0; $idList[$i]; $i++) { 
            $sort[]=$i+1;
        }
        $ids=implode(',',I('idList'));
        // $sort=implode(',',$sort);
        $sql = "UPDATE sm_company SET pic_sort = CASE com_id "; 
        $num=0;
        foreach ($sort as $key => $value) { 
            $sql .= sprintf("WHEN %d THEN %d ", $idList[$num], $value); 
            $num++;
        } 
        $sql .= "END WHERE com_id IN ($ids)"; 
        // echo $sql;
        $rd=M()->execute($sql);
        if($rd) $rs['status']=1;
        $this->ajaxReturn($rs);
}



<think>好的,我现在需要帮用户解决如何使用jQuery获取input元素的并显示的问题。用户已经提供了一些引用内容,里面提到了几种方法,包括原生JavaScript和jQuery方式。首先,我得回顾一下用户之前的对话,确保回答的一致性。 用户之前询问的是JavaScript函数的定义、用法和支持的数据类型,现在转向jQuery,可能需要简单对比或过渡。不过用户现在的问题很明确,集中在jQuery获取input并显示。根据提供的引用,用户展示了多种方法,比如通过表单名、getElementById,以及jQuery选择器如$("#test").val()等。 首先,我需要确定用户的需求是使用jQuery,所以重点放在jQuery方法上。引用中的方法一和方法二是原生JS,方法N提到了jQuery的几种选择器,比如ID、属性选择器等。还有引用3中的例子,用each遍历多个input的情况。用户可能需要综合这些方法,了解不同场景下的应用。 接下来,我需要组织回答的结构。通常,分步骤或场景会比较清晰。比如,单个input获取,多个同类型input的处理,复选框的情况,以及实时显示。每个部分给出示例代码,并解释代码的作用。 然后,要注意用户可能的疑问点,比如选择器的正确使用,val()和attr('value')的区别,以及如何处理多个的情况。例如,使用each循环遍历多个元素,或者使用map来收集所有。 另外,用户提到显示,所以可能需要演示如何将获取输出到页面,比如使用alert、console.log,或者更新DOM元素的文本内容。例如,将结果显示在div或span中。 还需要注意引用中的例子,特别是引用3中的遍历多个input的情况,用户可能需要知道如何获取一组input并拼接显示。这时候需要解释each方法的使用,以及如何累加。 同时,要避免常见的错误,比如选择器写错,或者没有等待DOM加载完成就执行代码。所以,在示例中应该包含$(document).ready()来确保代码在DOM就绪后执行。 最后,确保回答清晰易懂,代码示例正确,并且覆盖用户可能遇到的不同情况。比如,获取不同类型的input(文本、隐藏、复选框),以及实时显示输入的的技巧,比如使用oninput事件。 总结步骤: 1. 引入jQuery库。 2. 基本方法:通过ID、name、class选择器获取单个input。 3. 多个input的处理,使用each或map。 4. 复选框的处理,检查是否被选中。 5. 实时显示输入的方法。 6. 常见问题解答,比如选择器错误,事件绑定时机。 需要验证每个代码示例是否正确,特别是选择器和方法的正确使用。同时,对比val()和attr('value')的区别,说明val()更适合当前,而attr('value')获取的是初始属性。 可能还需要提到表单提交时的处理,但用户的问题集中在获取和显示,所以可能不需要深入表单提交部分。 确保回答中的代码格式正确,使用正确的语法,比如引号闭合,选择器正确。例如,在jQuery中,属性选择器应该是input[name="test"],而不是单引号,虽然在jQuery中单引号也可以,但最好统一使用双引号,避免混淆。 最后,生成相关问题,帮助用户深入理解,比如如何获取动态添加的input,或者处理表单序列化等。</think>### 如何使用 jQuery 获取 input 元素的并显示? 以下是不同场景下的实现方法及代码示例,覆盖单元素、多元素和动态交互需求: --- #### **1. 基本方法:获取单个 input** 假设 HTML 结构如下: ```html <input type="text" id="username" name="username" class="input-field" value="默认"> <button id="showBtn">显示</button> <div id="result"></div> ``` ##### **方法 1:通过 ID 选择器** ```javascript $("#showBtn").click(function() { var value = $("#username").val(); // 获取 $("#result").text(value); // 显示到页面 }); ``` ##### **方法 2:通过属性选择器** ```javascript $("#showBtn").click(function() { var value = $("input[name='username']").val(); alert(value); // 通过弹窗显示 }); ``` --- #### **2. 获取多个同类型 input** 若存在多个同名 input(如复选框或表单数组): ```html <input type="text" name="tags[]" value="JavaScript"> <input type="text" name="tags[]" value="jQuery"> <input type="text" name="tags[]" value="HTML5"> <button id="showAllBtn">显示所有</button> ``` ##### **遍历并拼接** ```javascript $("#showAllBtn").click(function() { var values = []; $("input[name='tags[]']").each(function() { values.push($(this).val()); // 逐个存入数组 }); console.log(values.join(", ")); // 输出:JavaScript, jQuery, HTML5 }); ``` --- #### **3. 复选框(Checkbox)的获取** 针对复选框的选择逻辑: ```html <input type="checkbox" name="skill" value="前端"> 前端 <input type="checkbox" name="skill" value="后端"> 后端 <input type="checkbox" name="skill" value="运维"> 运维 <button id="getSkills">获取选中项</button> ``` ##### **获取被选中的** ```javascript $("#getSkills").click(function() { var selected = []; $("input[name='skill']:checked").each(function() { selected.push($(this).val()); }); $("#result").text("已选技能:" + selected.join(" | ")); }); ``` --- #### **4. 实时显示输入内容** 监听 `input` 事件,实现输入时实时反馈: ```javascript $("#username").on("input", function() { var currentValue = $(this).val(); $("#result").text("当前输入:" + currentValue); }); ``` --- ### **关键区别与注意事项** | 方法 | 特点 | 适用场景 | |-----------------------|----------------------------------------------------------------------|------------------------| | `val()` | 获取当前输入(动态更新) | 大多数表单元素 | | `attr("value")` | 获取 HTML 属性 `value` 的初始(不会随输入改变) | 需要获取默认的场景 | | `:checked` 选择器 | 筛选被选中的复选框或单选按钮 | 表单验证、多选操作 | | `each()` 遍历 | 处理多个同名元素,逐个提取 | 数组形式的表单字段 | --- ### **常见问题解答** **Q1: 为什么用 `val()` 而不是 `attr("value")`?** - `val()` 返回当前输入(用户可能修改过),而 `attr("value")` 仅返回初始 HTML 属性[^1]。 **Q2: 如何确保代码在 DOM 加载后执行?** - 将代码包裹在 `$(document).ready()` 中: ```javascript $(document).ready(function() { // 事件绑定或操作代码 }); ``` **Q3: 动态添加的 input 如何获取?** - 需通过事件委托绑定监听: ```javascript $(document).on("click", "#dynamicBtn", function() { var value = $("#dynamicInput").val(); }); ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值