<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script language="javascript">
  $(function(){
   /* val()
     描述:获得第一个匹配元素的当前值 
     返回值:String,Array
   */
   //select显示选中值
    $("#bt_single").click(function(){
     alert($("#single").val());
    });
    //多行select显示选中的多行的值,默认逗号隔开,可用join函数指定隔开符号
    $("#bt_multiple").click(function(){
     alert($("#multiple").val());
     alert($("#multiple").val().join("&"));
    });
    //radio显示选中值
    $("#bt_radio").click(function(){
     alert($(":radio:checked[name=r1]").val());
    });
    //checkbox 显示多个选中的的值
    $("#bt_checkbox").click(function(){
     //不能得到多个值,须手动拼接
     alert($("input:checked[name=checkbox]").val());
     var str ="";
     $("input:checked[name=checkbox]").each(function(){
      str += $(this).val()+",";
      });
      alert(str.substring(0,str.length-1));
    });
     /* val(val)
     描述:设置一个匹配元素的值 
     这也可以为select元件赋值
    */
    $("#bt_single2").click(function(){
      $("#single").val("Single3");
      
     });
     
    /* val(array)
     描述:check,select,radio等都能使用为之赋值
     注意:选项的value,text 只要其一满足条件就会被选中,多行select可以看出
    */
    $("#bt_p").click(function(){
      $(":radio").val(["radio3"]);
      $(":checkbox").val(["check1","check2"]);
      $("#multiple").val(["Multiple4","Multiple5"]);
     });
   
   });
  
  </script>
</head>
<body>
  <select />
 <br/>

 <select />
 <br/>
 <br/>

 <input type="checkbox" name="checkbox" value="check1"/> 多选1
 <input type="checkbox" name="checkbox" value="check2"/> 多选2
 <input type="checkbox" name="checkbox" value="check3"/> 多选3
 <input type="checkbox" name="checkbox" value="check1"/> 多选4
 <input type="button" />

</body>
</html>

相关文章:

  • 2021-05-06
  • 2021-09-09
  • 2021-07-16
  • 2022-12-23
  • 2021-05-30
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-10-27
  • 2021-12-24
  • 2021-08-29
  • 2022-01-04
  • 2022-12-23
相关资源
相似解决方案