input 输入值并显示总结【初学者】

最新推荐文章于 2023-12-12 15:24:02 发布

原创最新推荐文章于 2023-12-12 15:24:02 发布 · 5.6k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍如何使用HTML DOM原生方法及jQuery来获取HTML表单元素的值，并展示了针对不同类型的输入框（如text、checkbox、radio、select等）的具体实现方式。

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

一.使用“原生”HTML DOM获取input的输入值并显示

1.理论基础

HTML <input> value属性。value规定<input>元素的值。value对于不同input类型，用法也不同。

1.对于"button","reset","submit"类型 —— 定义按钮上的文字；
2.对于"text","password","hidden"类型 ——定义输入字段的初始（默认）值；
3.对于"checkbox","radio","image"类型 ——定义与input元素相关的值，当提交表单时该值会发送到表单的action URL。

最需要注意的是，value属性对于<input type="checkbox">和<input type="radio">是必需的。而对于<input type="file"> value属性是不适用的。

2.实现原理

（1）使用document.getElementByid("idName").value获取元素的值，然后输出到页面上。

（2）表单名.input框id 的name.value

3.实现代码

 <body>
  <form class="benTigerKinForm" action="hello.action" name="benTiderKin">
    <table class="benTigerKinClass" >
      <tr>
        <th>姓名：</th>
        <td>
          <input type="text" id="userNameId" name="username" value=""/>
        </td>
      </tr>
    </table>
    <input type="button" value="登录" onclick="login()"/>
  </form>
  </body>
<script>
  function login() {

      var user = document.getElementById("userNameId").value;
      alert(user);
      var userName = benTigerKin.userNameId.value;
      alert(userName);
  }</script>

二.js

三.JQuery获取input的输入值并显示

1.JQuery引入：下载jquery-1.8.3.min.js放入jquery文件夹中

2.引入到jsp页面： <script src="jquery/jquery-1.8.3.min.js"></script>

ps:jquery引入路径解释：jquery/jquery-1.8.3.min.js以当前页面helloWorld.jsp为坐标在当前文件夹中查找，由于helloWorld.jsp和jquery文件夹都在同一个目录下所以不需要

'/',如果加'/'意思是从项目根目录查找

3.实现代码：

方法N
$("#test").val()

$("input[name='test']").val()

$("input[type='text']").val()

$("input[name='test']").val()

$("input[type='text']").attr("value")

function login() {
    var user = $("#userNameId").val();
    alert(user);
}

【注意要是有两个input name 都是userName,取第一个，且不报错】

var username = $("input[name='userName']").val();
alert(username);

【注意要是有两个input type 都是text,取第一个，且不报错】

var username = $("input[type='text']").val();
alert(username);

【注意要是有两个input name 都是userName,取第一个，且不报错】

var username = $("input[name='userName']").attr("value");
alert(username);

注意要是有两个input type 都是text,取第一个，且不报错】

var username = $("input[type='text']").attr("value");
alert(username);

a.checkbox类型的取值

<tr>
  <th>性别：</th>
  <td>
    <input type="checkbox" id="male" name="checkbox" value="male">男</input>
    <input type="checkbox" id="female" name="checkbox" value="female">女</input>
  </td>
</tr>

checkbox的第二个元素被打勾：$("input[name='checkbox']").get(1).checked = true; //打勾

checkbox的value='female'的元素打勾：$("input[name='checkbox'][value='female']").attr("checked",true);

或$("input[name='checkbox'][value='female']").attr("checked","checked");

判断checkbox是否已经打勾：if($("input[name='checkbox'][value='female']").attr('checked')){}

jQuery获取CheckBox选择的Value值：

//选择被选中CheckBox元素的集合如果你想得到Value值你需要遍历这个集合

$('input:checkbox').each(function() {
    if ($(this).attr('checked')) {
        alert($(this).val());
    }
});

function login() {
    var ids = '';

    $("input[name='checkbox']:checkbox").each(function() {
        if ($(this).attr("checked")) {
            ids += $(this).attr('value')+',';//遍历被选中CheckBox元素的集合 得到Value值
        }
    });
    alert(ids);
}

checkbox的checked属性：

$("#checkbox_id").attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false)

$("#checkbox_id").attr("checked",true); //设置一个CheckBox的状态为选中(checked=true)

$("#checkbox_id").attr("checked",false); //设置一个CheckBox的状态为不选中(checked=false)

b.radio类型的取值

<th>性别：</th>
<td>
  <input type="radio" id="male" name="radio" value="male" checked="checked">男</input>
  <input type="radio" id="female" name="radio" value="female">女</input>
</td>

默认取值用checked="checked"

获取一组radio被选中项的值：var item = $('input[name=items][checked]').val(); --注：name即控件name属性（百度所得，我自己测试不行）

radio单选组的第二个元素为当前选中项：$('input[‘name=items]').get(1).checked = true;

或 $('input[name=items]').attr("checked", '1′);

radio的value = 'val'的元素为当前选中项：$('input[name=items] [value='val']').attr("checked","checked");

radio设置value=2的元素为当前选中项：$("input[type=radio]").attr("checked",'2′);

radio被选中项的value值：$("input[name='radio_name'][checked]").val();

根据Value值设置Radio为选中状态：$("input[name='radio_name'][value='要选中Radio的Value值'").attr("checked",true);

jQuery获取radio选择的Value值：

取出选中的值，直接判断是否选中，再去取值，是取不到值的，取到的结果都是undefined，要用如下这种方式：

 $("input[name='radio']:radio").each(function() {
          if ($(this).attr("checked")) {
              alert($(this).attr('value'));
//              alert($(this).val());这两种都是可以的
          }
      });