JQ关于复选框、单选框和下拉列表的取值

版权声明:转载原创文章请以超链接形式请注明原文章出处,尊重作者,尊重原创!


恰饭广告




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>document</title>
</head>
<body>
<input type="checkbox" id="choose">全选/全不选
<input type="button" id="invert" value="反选"><br>
<input type="checkbox" name="sports" value="乒乓球">乒乓球
<input type="checkbox" name="sports" value="足球">足球
<input type="checkbox" name="sports" value="篮球">篮球
<input type="checkbox" name="sports" value="羽毛球">羽毛球
<input type="checkbox" name="sports" value="排球">排球
<p></p>
<input type="button" value="提交" id="sport">
<p></p>
<input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex">女
<input type="radio" value="保密" name="sex">保密
<input type="button" value="提交" id="sex">
<p></p>
<select name="career" id="select">
  <option value="请选择一个">请选择你的职业</option>
  <option value="学生">学生</option>
  <option value="上班族">上班族</option>
</select>
<input type="button" id="career" value="提交">
<!-- 建议要较高版本的CDN或js库 -->
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
        $(document).ready(function(){
            //全选与全不选
            $("#choose").click(function(){
                if(this.checked){
                    $("input[name='sports']").prop("checked",true);}
                else{
                    $("input[name='sports']").prop("checked",false);}
            });
            //反选
            $("#invert").click(function(){
                 $("input[name='sports']").each(function () {
                    $(this).prop("checked", !$(this).prop("checked"));
                    });
            });
            //checkbox取值
            $("#sport").click(function(){
                var check=$("input[name='sports']:checked").val();
                if(check==null){
                    alert("请选择一个");
                }
                else{
                var txt="";
                $("input[name='sports']:checked").each(function(){
                txt+="\n"+$(this).val();
            });
            alert("你选中的是:"+txt);
                }
            });
            //radio取值
        $("#career").click(function(){
            var sel=$("#select option:selected").val();
            alert(sel);
       });
       //option取值
       $("#sex").click(function(){
         var val=$("input[name='sex']:checked").val();
         if(val==null){
             alert("请选择一个");
         }
         else{
             alert(val);
         }
       });
        });
    </script>
  </body>
  </html>  

原文链接:https://www.idaobin.com/archives/274.html

让我恰个饭吧.ヘ( ̄ω ̄ヘ)

支付宝 ——————- 微信
图片加载中图片加载中



恰饭广告

发表评论

邮箱地址不会被公开。 必填项已用*标注

× 3 = 9