http://emafia.co.uk/map/：使用右侧的顶部链接查看我目前拥有的内容。
有人可以帮我解决以下问题吗？
- 修复一次只能选择 1 个文本框
- 提交函数更新 mysql 数据库中的值并返回结果（有人告诉我为此使用 JSON，但是我尝试过的每个 JSON 函数都无法让它发布数据并接收它）
到目前为止我的 HTML：
<!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>land</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="map.js"></script>
<style type="text/css">
.credits{font-size: 1.6em; line-height: 2em; margin: 0 0 0 10px;}
</style>
</head>
这是 HTML 正文：
<body>
<p class="credits"> </p>
<form action="" method="get">
<div id="map-box">
<div id="container-map">
<img src="images/map.gif" alt="Map" name="map1" border="0" usemap="#map1Map" id="map" />
<map name="map1Map" id="map1Map">
<area class="sw" shape="poly" coords="162,319,162,303,186,303,186,264,162,264,162,287,175,282,160,297,140,298,110,335,138,335" alt="sw" />
<area class="s" shape="poly" coords="186,264,206,264,206,312,179,313,162,318,162,303,186,303" alt="s" />
<area class="se" shape="poly" coords="206,312,243,311,268,298,268,287,251,283,255,279,206,279" alt="se" />
<area class="e" shape="poly" coords="206,279,255,279,270,267,276,241,252,230,246,238,237,233,221,233,221,264,206,264" alt="e" />
<area class="em" shape="poly" coords="221,264,196,264,196,209,214,209,214,233,221,233" alt="em" />
<area class="wm" shape="poly" coords="162,264,196,264,196,209,162,209" alt="wm" />
<area class="w" shape="poly" coords="162,209,122,209,130,240,141,236,143,251,119,267,123,281,144,279,154,288,162,288" alt="w" />
<area class="yl" shape="poly" coords="214,233,238,233,245,225,225,173,212,167,176,167,176,185,186,185,186,208" alt="yl" />
<area class="nw" shape="poly" coords="186,209,169,209,174,184,163,187,156,169,163,155,160,153,176,137,176,185,186,185" alt="nw" />
<area class="ne" shape="poly" coords="177,167,213,167,209,165,201,128,192,122,176,137" alt="ne" />
<area class="scot" shape="poly" coords="160,153,192,122,177,110,163,114,170,104,179,100,172,93,178,92,198,49,193,42,162,42,141,51,148,32,166,14,169,1,144,7,125,2,114,34,86,47,86,55,106,69,106,79,95,83,95,98,109,97,113,108,106,138,111,138,116,113,132,131,121,153,124,161,131,159,137,166" alt="scot" />
<area class="ni" shape="poly" coords="117,176,97,192,91,193,83,190,79,179,70,182,71,187,64,190,53,182,58,163,71,154,80,147,91,143,99,143" alt="ni" />
</map>
</div> <!--#container-map-->
<div id="areas">
<ul id="regions">
<li class="nw">North West England <span class="nw-n"></span></li>
<li class="ne">North East England <span class="ne-n"></span></li>
<li class="yl">Yorkshire & Lincolnshire <span class="yl-n"></span></li>
<li class="wm">West Midlands <span class="wm-n"></span></li>
<li class="em">East Midlands <span class="em-n"></span></li>
<li class="sw">West & South West <span class="sw-n"></span></li>
<li class="e">East <span class="e-n"></span></li>
<li class="s">South <span class="s-n"></span></li>
<li class="se">London & South East <span class="se-n"></span></li>
<li class="scot">Scotland <span class="scot-n"></span></li>
<li class="ni">Northern Ireland <span class="ni-n"></span></li>
<li class="w">Wales <span class="w-n"></span></li>
</ul>
<div id="counties">
<!--start-->
<div id="st-c" class="counties-container">
<p class="tip">This is where you can wage war over territory, fight for the territory by blowing up drug factorys, destorying bullet rings and even try to do a hit on the owner to completly take over the land... more info shortly</p>
<p class="tip">Tip: Double clicking a region will select all counties in that region. (if there is multiple countrys in the region)</p>
</div>
<!--nw-->
<div id="nw" class="counties-container">
<h2>North West</h2>
<p class="select"><a class="selectall" title="Select All">Select All</a> | <a class="deselectall" title="Deselect All">Deselect All</a></p>
<fieldset class="nw-t">
<p><b>Results:</b> <span id="results"></span></p>
<form>
<br/>
<input type="checkbox" name="check" value="Manchester" id="ch1"/>
<label for="ch1">Manchester</label>
<input type="checkbox" name="check" value=" And Man city" id="ch2"/>
<label for="ch1">Man city </label>
<br>
<br>
<br>
<label for="r1">Bomb Factory's</label>
<input type="radio" name="radio" value=": Bomb" id="r1"/>
<label for="r1">Attack Guards</label>
<input type="radio" name="radio" value=": Attack" id="r2"/>
<label for="r1">Leave</label>
<input type="radio" name="radio" value=": Leave" id="r3"/>
</form>
<input type="submit" name="sub" value="Submit"/>
</fieldset>
</div>
<!--ne-->
<div id="ne" class="counties-container">
<h2>North East</h2>
<p class="select"><a class="selectall" title="Select All">Select All</a> | <a class="deselectall" title="Deselect All">Deselect All</a></p>
<fieldset class="ne-t">
<input type="checkbox" /><label>Northumberland</label>
</fieldset>
</div>
<!--yl-->
<div id="yl" class="counties-container">
<h2>Yorkshire & Lincolnshire</h2>
<p class="select"><a class="selectall" title="Select All">Select All</a> | <a class="deselectall" title="Deselect All">Deselect All</a></p>
<fieldset class="yl-t">
<input type="checkbox" /><label>Yorkshire</label>
</fieldset>
</div>
<!--wm-->
<div id="wm" class="counties-container">
<h2>West Midlands</h2>
<p class="select"><a class="selectall" title="Select All">Select All</a> | <a class="deselectall" title="Deselect All">Deselect All</a></p>
<fieldset class="wm-t">
<input type="checkbox" /><label>Staffordshire</label>
</fieldset>
</div>
<!--em-->
<div id="em" class="counties-container">
<h2>East Midlands</h2>
<p class="select"><a class="selectall" title="Select All">Select All</a> | <a class="deselectall" title="Deselect All">Deselect All</a></p>
<fieldset class="em-t">
<input type="checkbox" /><label>Derbyshire</label>
</fieldset>
</div>
<!--sw-->
<div id="sw" class="counties-container">
<h2>South West</h2>
<p class="select"><a class="selectall" title="Select All">Select All</a> | <a class="deselectall" title="Deselect All">Deselect All</a></p>
<fieldset class="sw-t">
<input type="checkbox" /><label>Cornwall</label>
</fieldset>
</div>
<!--e-->
<div id="e" class="counties-container">
<h2>East</h2>
<p class="select"><a class="selectall" title="Select All">Select All</a> | <a class="deselectall" title="Deselect All">Deselect All</a></p>
<fieldset class="e-t">
<input type="checkbox" /><label>Essex</label>
</fieldset>
</div>
<!--s-->
<div id="s" class="counties-container">
<h2>South</h2>
<p class="select"><a class="selectall" title="Select All">Select All</a> | <a class="deselectall" title="Deselect All">Deselect All</a></p>
<fieldset class="s-t">
<input type="checkbox" /><label>Hampshire</label>
</fieldset>
</div>
<!--se-->
<div id="se" class="counties-container">
<h2>South East</h2>
<p class="select"><a class="selectall" title="Select All">Select All</a> | <a class="deselectall" title="Deselect All">Deselect All</a></p>
<fieldset class="se-t">
<input type="checkbox" /><label>London</label>
</fieldset>
</div>
<!--scot-->
<div id="scot" class="counties-container">
<h2>Scotland</h2>
<p class="select"><a class="selectall" title="Select All">Select All</a> | <a class="deselectall" title="Deselect All">Deselect All</a></p>
<fieldset class="scot-t">
<input type="checkbox" /><label>Edinburgh</label>
</fieldset>
</div>
<!--ni-->
<div id="ni" class="counties-container">
<h2>Northern Ireland</h2>
<p class="select"><a class="selectall" title="Select All">Select All</a> | <a class="deselectall" title="Deselect All">Deselect All</a></p>
<fieldset class="ni-t">
<input type="checkbox" /><label>Belfast</label>
</fieldset>
</div>
<!--w-->
<div id="w" class="counties-container">
<h2>West</h2>
<p class="select"><a class="selectall" title="Select All">Select All</a> | <a class="deselectall" title="Deselect All">Deselect All</a></p>
<fieldset class="w-t">
<input type="checkbox" /><label>Wrexham</label>
</fieldset>
</div>
</div> <!--.counties-->
</div> <!--.areas-->
<div class="clear"></div>
</div> <!--#map-box-->
</form>
</body>
</html>
这是我在页面中的 JavaScript：
<script>
function showValues() {
var fields = $(":input").serializeArray();
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value + " ");
});
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
$('#form').submit(function() {
if ($('input:checkbox', this).is(':checked') &&
$('input:radio', this).is(':checked')) {
// everything's fine...
} else {
alert('Please select something!');
return false;
}
});
</script>