1. 程式人生 > >radio和複選框的案例

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);
                }
            })