利用jQuery选择器获取单选按钮所选的值和一组checkbox选项的值

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="Script/jquery-3.3.1.js"></script>
  <script type="text/javascript">
   
   
  $(function () {
  $("input:button").click(function (event) {
  str = "";
  str += "姓名：" + $(":text").val() + "\n";
  str += "性别：" + $(":radio:checked").next().text() + "\n";
  str += "爱好：";
  like = [];
  $(":checkbox:checked").each(function (index, el) {
  like.push($(this).next().text());
  });
  str += like.join(",");
  alert(str);
  });
  })
  </script>
  </head>
  <body>
  <form>
  <div style="width:400px;">
  姓名：<input type="text" /><br /><br />
  性别：<input type="radio" name="sex" value="1" />
  <span>男</span>
  <input type="radio" name="sex" value="2" /><span>女</span><br /><br />
  爱好：<input type="checkbox" name="like" value="游泳" /><span>游泳</span>
  <input type="checkbox" name="like" value="爬山" /><span>爬山</span>
  <input type="checkbox" name="like" value="打球" /><span>打球</span>
  <input type="checkbox" name="like" value="骑车"/><span>骑车</span>
  <input type="checkbox" name="like" value="阅读"/><span>阅读</span>
  <input type="checkbox" name="like" value="聊天" /><span>聊天</span><br /><br />
  <center><input type="button" value="提交" style="background-color:forestgreen; width:100px;height:40px;"/>&nbsp;&nbsp;
  <input type="reset" value="重置" style="background-color:forestgreen;width:100px;height:40px;"/></center>
  </div>
  </form>
  </body>
  </html>
posted @ 2018-08-16 08:28  江环既  阅读(560)  评论(0)    收藏  举报