News:博客小程序已成功发布,各位可以自行搜索使用,方便随时查找知识。

jquery获取单选框复选框下拉框值

忧郁之子 647 0 条

jquery获取单选框复选框下拉框值

jquery获取单选框(radio)复选框(checkbox)下拉框(select)的值,亲测可用。有什么疑问可以留言

效果图:
20160218153630060.jpg

html代码:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8" />
        <script src="test.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            body{
                background-image: url(img/bg.jpg);
                font-family: "微软雅黑";
            }
            ul li{list-style:none;float:left;cursor:pointer;padding:0 5px;border:1px solid #ccc;border-radius:2px;margin: 0 2px;}
            .content,content-radio,content-checkbox{display:inline;}
            .selected{background-color: #17D6AA;}
        </style>
    </head>

    <body>
        <span>jquery 获取 ul li 的值: <span class="content">全部</span></span>
        <ul>
            <li>值一</li>
            <li>值二</li>
            <li>值三</li>
            <li>值四</li>
            <li>值五</li>
        </ul>
        <br><br>

        <span>jquery 获取 radio 的值: <span class="content-radio">全部</span></span><br>
        <label><input type="radio" name="sex" value="男">男</label>
        <label><input type="radio" name="sex" value="女">女</label>
        <label><input type="radio" name="sex" value="保密">保密</label>
        <!--
        <p>1、$('input:radio:checked').val();</p>
        <p>2、$("input[type='radio']:checked").val();</p>
        <p>3、$("input[name='sex']:checked").val();</p>
        <p>4、val 可以换成 text;</p>
        -->
        <br><br>

        <span>jquery 获取 checkbox 的值: <span class="content-checkbox">全部</span></span><br>
        <label><input type="checkbox" name="con" value="内容一">内容一</label>
        <label><input type="checkbox" name="con" value="内容二">内容二</label>
        <label><input type="checkbox" name="con" value="内容三">内容三</label>
        <br><br>

        <span>jquery 获取 select 的值: <span class="content-select">全部</span></span><br>
        <select>
            <option>-请选择-</option>
            <option>选择一</option>
            <option>选择二</option>
            <option>选择三</option>
        </select>
</body>
</html>

jquery代码:

        <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
        <script>
            $(function(){
                // 获取 ul li 中的值
                $("ul").find("li").click(function(){
                    $(this).addClass("selected").siblings().removeClass("selected");
                    $(".content").text($(this).text());
                });
                // 获取 radio 中的值
                $("input[type='radio']").click(function(){
                    $(".content-radio").text($("input[type='radio']:checked").val());
                });
                // 获取 checkbox 中的值
                $("input[type='checkbox']").click(function(){
                    var cons = [];// 每次点击需清空上次选择内容,避免重复
                    $("input[type=checkbox]").each(function(){
                        if(this.checked){
                            cons.push($(this).val());
                            $(".content-checkbox").text(cons);
                        }
                    });
                });
                // 获取 select 中的值
                $("select").click(function(){
                    $(".content-select").text($('select option:selected').text());
                });
            });
        </script>
发表我的评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
欢迎光临轩宇网工作室