当外部 input 值的改变，获取当前 input type="hidden" 的值

最新推荐文章于 2023-02-08 19:58:31 发布

weixin_34343000

最新推荐文章于 2023-02-08 19:58:31 发布

阅读量649

点赞数

文章标签： javascript ViewUI

本文介绍使用jQuery获取不同类型的input元素的值的方法，并演示了如何在input类型为hidden的元素值改变时触发自定义事件。

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

1.如何用jquery获取<input id="test" name="test" type="text"/>中输入的值？

方法一：

$("#test").val()

方法二：

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

方法三：

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

方法四：

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

2.当 input type="hidden" 的值发生改变时，触发自定事件，获取改变后的值

demo_1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.8.2.js"></script>
</head>
<body>
  <input type="text" name="current" />
  <input type="hidden" name="hidden" value="0">

  <script>
    $("input[type='text']").on('input',function(){
      var currentVal = $("input[type='text']").val();
      // 触发 改变 input type="hidden" 的值
      $("input[type='hidden']").trigger('input:changed', currentVal);
    })
    // 给 input type="hidden" 添加自定义事件
    $("input[type='hidden']").on('input:changed', function (e, val) {
      // 获取 input type="hidden" 的值
        console.log(val);
    });
  </script>
</body>
</html>

demo_2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.8.2.js"></script>
</head>
<body>
  <input type="text" name="current" />
  <input type="hidden" name="hidden" onpropertychange="changeVal()" value="0">

  <script>
    $("input[type='text']").on('input',function(){
      // 触发绑定方法
      changeVal();
    })
    // 给 input type="hidden" 添加 onpropertychange事件
    function changeVal(){
      // 获取当前值
      console.log($("input[type='hidden']").val()); // 0
    }
  </script>
</body>
</html>