jq:对input框的一些操作，单选框，多选框

最新推荐文章于 2024-08-11 16:46:50 发布

半夏ing

最新推荐文章于 2024-08-11 16:46:50 发布

阅读量1.3k

点赞数 1

分类专栏：前端 jquery

本文链接：https://blog.csdn.net/Fiona_lms/article/details/77074871

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

jquery

9 篇文章 0 订阅

订阅专栏

今天对input框的一些操作进行简单的总结，方便自己以后来查阅

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .button1{
            background: yellow;
            width:200px;
            height: 50px;
        }
        .button2{
            background: blue;
            width:200px;
            height: 50px;
        }
        .button3{
            background: green;
            width:200px;
            height: 50px;
        }
    </style>
</head>
<body>
<div>
    文本框<input type="text" name="test1" value="文本框" class="test1" id="test1">
</div>
<div>
    单选框<input type="radio" name="radio" value="单选1"/>
    <input type="radio" name="radio" value="单选2"/>
    <input type="radio" name="radio" value="单选3"/>
</div>
<div>
    多选框
    <input type="checkbox" name="checkbox" value="多选1"/>
    <input type="checkbox" name="checkbox" value="多选2"/>
    <input type="checkbox" name="checkbox" value="多选3"/>
</div>
<div>
    获取文本框的内容<input type="button" name="test2" class="button1" value="获取文本框的内容"><br>
    获取单选框的内容<input type="button" name="test2" class="button2" value="获取单选框的内容"><br>
    获取多选框的内容<input type="button" name="test2" class="button3" value="获取多选框的内容"><br>
</div>
</body>
</html>

上述代码对应的图片：
这里写图片描述

对input框的操作

获取input文本框的值：

//获取文本框内容
  $(".button1").on('click',function(){
      var value1 = $('input[type="text"]').val();
      var value2 = $('input[name="test1"]').val();
      var value3 = $('.test1').val();
      var value4 = $('#test1').val();
     console.log(value1,value2,value3,value4);
  })

根据上述代码，输出的值是一样的，都是文本框
2.获取input单选框的值:

 //获取单选框的value
    $('.button2').on('click',function(){
        var value = $("input[type='radio']:checked").val();
        var value1 = $(" input[name='radio']:checked").val()
        console.log(value,value1);
    })

3.获取input多选框的值

       //获取多选框的值
    $('.button3').on('click',function(){
        var datas = [];
        $("input[name='checkbox']:checked").each(function(){
            datas.push($(this).val());
        });
        console.log(datas);
    })

或者

 //获取多选框的值
    $('.button3').on('click',function(){
        var datas = [];
        $("input[type='checkbox']:checked").each(function(){
            datas.push($(this).val());
        });
        console.log(datas);
    })