radio和複選框的案例
<tr>
<td>性別</td>
<td><input type="radio" value="男" name="txtSsex" checked="checked" />男<input type="radio" value="女" name="txtSsex" />女</td>
</tr>
<tr>
<td>年齡</td>
<td><input type="text" value="" id="txtSage" /></td>
</tr>
<tr>
<td>愛好</td>
<td>
<input type="checkbox" name="txtShobby" value="看書" id="checkedbox1" />看書
<input type="checkbox" name="txtShobby" value="敲程式碼" id="checkedbox2" />敲程式碼
<input type="checkbox" name="txtShobby" value="找BUG" id="checkedbox3" />找BUG
<input type="checkbox" name="txtShobby" value="睡覺" id="checkedbox4" />睡覺
</td>
</tr>
<tr>
<td>班級</td>
<td><select id="S1"></select></td>
</tr>
-----繫結下拉框
$(function () {$.ajax({
url: "/Home/ShowClass",
type: "get",
dataType: "json",
success: function (da) {
if (da.length > 0) {
for (var i = 0; i < da.length; i++) {
$("#S1").append("<option value='" + da[i].Cid + "'>" + da[i].Cname + "</option>");
}
}
}
}) }) -------新增時獲取資料 var sex = $(":radio:checked").val();
var age = $("#txtSage").val();
var ck = "";
$(":checked[name='txtShobby']:checked").each(function () {
ck += $(this).val() + ",";
})
ck = ck.substr(0, ck.length - 1);
var cid = $("#S1").val(); ------修改時反填資料 var id = location.href.toString().split('=')[1]; $.ajax({
url: "/Home/Fan?id=" + id,
type: "get",
dataType: "json",
success: function (da) { var id = da[0].Sid;
var name = da[0].Sname;
var sex = da[0].Ssex;
var age = da[0].Sage;
var hobby = da[0].Shobby;
var cid = da[0].Cid; $("#txtSid").val(id);
$("#txtSname").val(name);
$(":radio[name='txtSsex'][value='" + sex + "']").attr("checked", true);
$("#txtSage").val(age);
var ck = hobby.split(',');
$(ck).each(function (index, item) {
$("[name='txtShobby'][value='" + item + "']").attr("checked", "checked");
}) $("#S1").val(cid);
}
})