黑马程序员技术交流社区

标题: jQuery操作radio、checkbox、select示例 [打印本页]
作者: aisini    时间: 2014-7-30 11:20
标题: jQuery操作radio、checkbox、select示例
  1. <script src="http://code.jquery.com/jquery-1.11.1.min.js" ></script>

  3. <input type="radio" name="radio" id="radio1" value="1" />1   
  4. <input type="radio" name="radio" id="radio2" value="2" />2   
  5. <input type="radio" name="radio" id="radio3" value="3" />3   
  6. <input type="radio" name="radio" id="radio4" value="4" />4   

  8. <br/>

  10. <input type="checkbox" name="checkbox" id="checkbox_id1" value="1" />1   
  11. <input type="checkbox" name="checkbox" id="checkbox_id2" value="2" />2   
  12. <input type="checkbox" name="checkbox" id="checkbox_id3" value="3" />3   
  13. <input type="checkbox" name="checkbox" id="checkbox_id4" value="4" />4   
  14. <input type="checkbox" name="checkbox" id="checkbox_id5" value="5" />5   

  16. <br/>

  18. <select name="select" id="select_id" style="width: 100px;">   
  19.     <option value="1">1</option>   
  20.     <option value="2">2</option>   
  21.     <option value="3">3</option>   
  22.     <option value="4">4</option>   
  23.     <option value="5">5</option>   
  24.     <option value="6">6</option>   
  25. </select>   

  27. <br/>

  29. <span onclick="show()">点击</span>

  31. <script>

  33. function show()
  34. {
  35.     //jquery获取单选框的值
  36.     alert($('input[type="radio"][name="radio"]:checked').val());

  38.     //jquery循环输出选中的值
  39.     $("input[type=checkbox][name=checkbox]:checked").each(function(){
  40.         alert($(this).val());   
  41.     });   

  43.     //jquery获取Select选中项的Value   
  44.     alert($("#select_id").val());

  46.     //jquery获取Select选中项的Text               
  47.     alert($("#select_id :selected").text());   
  48. }

  50. </script>
复制代码






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2