JQuery 表单快速选择器，表单属性选择器

最新推荐文章于 2024-03-20 16:21:21 发布

houyanhua1

最新推荐文章于 2024-03-20 16:21:21 发布

阅读量292

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/houyanhua1/article/details/78834044

版权

JQuery 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

表单快速选择器。

$(':text'); //相当于$('input[type=text]'); 属性选择器的快速简写。

$(':input');

$(':password');

$(':radio');

$(':checkbox');

$(':submit');

$(':reset');

$(':image');

$(':button');

$(':file');

$(':hidden');

表单对象属性选择器：

$(':enabled');

$(':disabled');

$(':checked'); //(单选框，复选框)

$(':selected'); //(下拉列表框)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            //为“全部右移”按钮绑定事件
            $('#btnRightAll').click(function () {
                //获取所有子元素,追加到右边的select中
                $('#selectLeft').children().appendTo('#selectRight');
            });
            
            //为“选中右移”按钮绑定事件
            $('#btnRight').click(function () {
                //获取到所有被选中的option
                $('#selectLeft :selected').appendTo('#selectRight');
            });
            
            //为“全部左移”按钮绑定事件
            $('#btnLeftAll').click(function() {
                //获取右侧所有的option
                $('#selectLeft').append($('#selectRight option'));
            });
            
            //为“选中左移”按钮绑定事件
            $('#btnLeft').click(function() {
                //获取右侧选中的项，加到左边
                $('#selectLeft').append($('#selectRight :selected'));
            });
        });
    </script>
</head>
<body>
    <select id="selectLeft" multiple="true">
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>
    <input type="button" id="btnRightAll" value=">>"/>
    <input type="button" id="btnRight" value=">"/>
    <input type="button" id="btnLeft" value="<"/>
    <input type="button" id="btnLeftAll" value="<<"/>
    <select id="selectRight" multiple="true"></select>
</body>
</html>

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 表单快速选择器，表单属性选择器

表单快速选择器。$(':text'); //相当于$('input[type=text]'); 属性选择器的快速简写。$(':input');$(':password');$(':radio');$(':checkbox');$(':submit');$(':reset');$(':image');$(':button');$('
复制链接

扫一扫