<!DOCTYPE html> <!--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <html> <head> <meta charset="utf-8"> <title>jQuery UI 測試</title> <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/hot-sneaks/jquery-ui.css" rel="stylesheet"> <link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet"> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script> <style> article,aside,figure,figcaption,footer,header,hgroup,menu,nav,section {display:block;} body {font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} </style> </head> <body> <p>你最喜歡吃的水果是 :</p> <div id="fruits"> <input type="checkbox" id="watermelon" name="fruit" value="西瓜"> <label for="watermelon">西瓜</label> <input type="checkbox" id="banana" name="fruit" value="香蕉"> <label for="banana">香蕉</label> <input type="checkbox" id="pineapple" name="fruit" value="鳳梨"> <label for="pineapple">鳳梨</label> <input type="checkbox" id="apple" name="fruit" value="蘋果"> <label for="apple">蘋果</label> </div><br> <input type="button" id="ok" value="確定"> <div id="msgbox" title="訊息"></div> <script language="JavaScript"> $(document).ready(function(){ var opt={autoOpen: false, buttons: {"確定": function() {$(this).dialog("close");}} }; $("#msgbox").dialog(opt); $("#fruits").buttonset(); $(":button").button(); $("#ok").click(function() { var fruit=new Array(); $("[name=fruit]:checkbox").each(function() { if (this.checked) {fruit.push(this.value);} }); if (fruit.length==0) { $("#msgbox").html("不吃水果容易便秘喲!"); $("#msgbox").dialog("open"); } else { $("#msgbox").html("你喜歡吃的水果:" + fruit.join()); $("#msgbox").dialog("open"); } }); }); </script> </body> </html>