jquery简单的input操作

最新推荐文章于 2024-03-07 16:40:01 发布

johnZhangqi

最新推荐文章于 2024-03-07 16:40:01 发布

阅读量2k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/johnZhangqi/article/details/119547054

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>jquery简单的input操作</title>
    </head>
    <body>
        <div><input type="text" id="text" /></div>
        <div>
            <input type="checkbox" name="abc" value="checkbox1" id="in1" checked="checked" /><label for="in1"
                >一年级</label
            >
            <input type="checkbox" name="abc" value="checkbox2" id="in2" /><label for="in2">二年级</label>
            <input type="checkbox" name="abc" value="checkbox3" id="in3" /><label for="in3">三年级</label>
        </div>
        <div>
            <input type="radio" value="radio1" name="radioName" />1
            <input type="radio" value="radio2" name="radioName" />2
        </div>
        <div>
            <select id="select">
                <option value="select1">select1</option>
                <option value="select2">select2</option>
                <option value="select3">select3</option>
            </select>
        </div>

        <button id="setBtn">设置值</button>
        <button id="getBtn">获取值</button>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
            // 获取值
            $('#getBtn').click(function () {
                var chk_value = [];
                $('input[name="abc"]:checked').each(function () {
                    chk_value.push($(this).val());
                });
                console.log(
                    $('#text').val(),
                    chk_value,
                    $('input[name="radioName"]:checked').val(), // $("input[type='radio']:checked").val()
                    $('#select').val(), // 获得被选中的项的值 $('#select option:selected').val()
                    $('#select option:selected').text() //  获得被选中的项的文本
                );
            });

            // 设置值
            $('#setBtn').click(function () {
                $('#text').val('张三');
                $('input:checkbox').eq(0, 1, 2).attr('checked', 'true'); // $('input:checkbox').slice(0,2).attr('checked','true'); // $("input:checkbox[value='1']").attr('checked','true');
                $("input[name='radioName'][value=radio1]").prop('checked', true);
                $('#select').val('select2'); // $("#select option[value='select2']").attr('selected', true);
                // $("#select").empty(); 清空选项值   $("#test  option[text='select2']").remove()
            });
        </script>
    </body>
</html>

johnZhangqi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery简单的input操作

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt
复制链接

扫一扫