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

最新推荐文章于 2024-06-21 14:41:01 发布

BenTigerkin

最新推荐文章于 2024-06-21 14:41:01 发布

阅读量5.4k

点赞数

本文链接：https://blog.csdn.net/BenTigerkin/article/details/78114499

版权

一.使用“原生”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="登录" οnclick="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());这两种都是可以的
          }
      });

c.select类型的取值

获取select被选中项的文本：var item = $("select[@name=items] option[@selected]").text();

或 var item = $("select[name=items]").find("option:selected").text();

select下拉框的第二个元素为当前选中值：$('#select_id')[0].selectedIndex = 1; --注：select_id'即控件的id属性

select下拉框value = 'val'的元素为当前选中项：$("select[name=items] option[value='val']").attr("selected","selected");

select设置value=-sel3的项目为当前选中项：$("#sel").attr("value",'-sel3′); --注：sel即select控件的id属性

添加下拉框的option：$("<option value='1′>1111</option><option value='2′>2222</option>").appendTo("#sel");

select清空：$("#sel").empty();

获取值：

文本框,文本区域：$("#txt").attr("value");

多选框checkbox：$("input[name='checkbox':checked]").each(function(){

　　　　　　　　　　var val = $(this).val();

　　　　　　　　 });

单选组radio：$("input[type=radio][checked]").val();

下拉框select的value值：$('select').val();

下拉框select选中的text 值：$("select").find("option:selected").text();

文本框,文本区域：$("#txt").attr("value","); //清空内容

$("#txt").attr("value",'11′); //填充内容

事件：

当对象text_id获取焦点时触发：$("#text_id").focus(function(){//code...});

当对象text_id失去焦点时触发：$("#text_id").blur(function(){//code...});

其他：

使文本框的Vlaue值成选中状态：$("#text_id").select();

$("#text_id").val().split(","); //将Text的Value值以','分隔返回一个数组

BenTigerkin

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
input 输入值并显示总结【初学者】

一.使用“原生”HTML DOM获取input的输入值并显示1.理论基础HTML value属性。value规定元素的值。value对于不同input类型，用法也不同。1.对于"button","reset","submit"类型 —— 定义按钮上的文字；2.对于"text","password","hidden"类型 ——定义输入字段的初始（默认）值；3.对于"
复制链接

扫一扫