码迷,mamicode.com
首页 > Web开发 > 详细

jQuery操作下拉列表以及单选多选框

时间:2017-09-12 22:05:53      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:cli   www.   option   unit   var   com   ttext   ack   selected   

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <center>
            <!--文本框-->
            用户名:<input type="text" name="username" id="username" value="初始值" />
            <br />
            <br />

            <!--下拉列表-->
            部门:
            <select name="unit" id="unit" style="width: 200px;">
                <option value="0" selected>--请选择--</option>
                <option value="1">部门1</option>
                <option value="2">部门2</option>
            </select><br />

            <!--多选框-->
            爱好:
            <input type="checkbox" name="aihao" id="" value="0" checked="checked" />篮球
            <input type="checkbox" name="aihao" id="" value="1" checked="checked" />足球
            <input type="checkbox" name="aihao" id="" value="2" />羽毛球
            <input type="checkbox" name="aihao" id="" value="3" />乒乓球
            <br />

            <!--单选框-->
            性别:
            <input type="radio" name="gender" id="" value="0" checked="checked" /><input type="radio" name="gender" id="" value="1" /><br />
            <br />
            <input type="button" id="" value="改变文本值" onclick="initText()" />
            <input type="button" id="" value="改变下拉列表值" onclick="changeSelect()" />
            <input type="button" id="" value="改变多选框值" onclick="changeCheckbox()" />
            <input type="button" id="" value="改变单选框值" onclick="changeRadio()" />
            <input type="button" id="" value="动态添加一个给下拉列表" onclick="addSelect()" />
            <script type="text/javascript">
                /*读取与改变文本框值*/
                function initText() {
                    alert($("#username").val());
                    $("#username").val("这是改变后的值");
                }

                /*读取与改变下拉列表值*/
                function changeSelect() {
                    alert("选的值是" + $("#unit option:selected").val() + ",文本是:" + $("#unit option:selected").text());
                    $("#unit").val("2");
                }

                function changeCheckbox() {
                    /*获取多选框的值*/
                    //                    $aihaos是一个数组
                    var $aihaos = $("[name=‘aihao‘][checked]");
                    alert("多选框选中个数:" + $aihaos.length);
                    for(var i = 0; i < $aihaos.length; i++) {
                        var value = $($aihaos[i]).val();
                        alert(value);
                    }
                    /*设置为不选中状态*/
                    $($aihaos).attr("checked", false);
                    //设置其中一个为选中状态
                    $("[name=‘aihao‘] :eq(2)").attr("checked", checked);
                }

                function changeRadio() {
                    /*获取单选框的值*/
                    //                    $aihaos是一个数组
                    var $aihaos = $("[type=‘radio‘][checked]");
                    alert("多选框选中个数:" + $aihaos.length);
                    for(var i = 0; i < $aihaos.length; i++) {
                        var value = $($aihaos[i]).val();
                        alert(value);
                    }
                    //设改变单选框的值
                    $("[type=‘radio‘] :eq(1)").attr("checked", checked);
                }

                //动态给下拉列表增加选项
                function addSelect() {
                    var $unit = $("[name=‘unit‘]");
                    alert("多选框选中个数:" + $unit.length);
                    $unit.append("<option value=‘3‘>部门3</option>");
                    $("<option value=‘4‘>部门4</option>").appendTo($unit);
                }
            </script>

        </center>
    </body>

</html>

 

更多具体的可以参考:http://www.cnblogs.com/qlqwjy/p/7511814.html

 

jQuery操作下拉列表以及单选多选框

标签:cli   www.   option   unit   var   com   ttext   ack   selected   

原文地址:http://www.cnblogs.com/qlqwjy/p/7512272.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!