在Web開發中，要經常操作表單元素，如input輸入框，select下拉選擇框，radio單選按鈕，checkbox複選框等。下面，我就總結一下自己常用的操作這些元素的JS程式碼。

一、input元素操作

1、獲取input輸入值

<div>
    <form action="">
        <input id="inputElement" type="text">
    </form>
    <button onclick="getInputValue()">獲取input輸入值</button>
</div>
<script>
    $(function () {

    });

    //獲取input輸入值
    function getInputValue() {
        //var inputValue = $("#inputElement").val();
        //alert("JQ獲取輸入值："+inputValue);
        var inputValue = document.getElementById("inputElement").value;
        alert("JS獲取輸入值：" + inputValue);
    }
</script>
 

2、input焦點事件

獲得焦點和失去焦點事件：

<div>
    <form action="">
        <input onblur="inputOnBlur()" onfocus="inputOnFocus()" id="inputElement" type="text">
    </form>
</div>

<script>
    $(function () {
        //監聽input元件的獲得焦點事件，當input獲得焦點時，會觸發此事件
        $("#inputElement").focus(function () {
            console.log("JQ：input元件的獲得焦點事件");
        });

        //監聽input元件的失去焦點事件，當input失去焦點時，會觸發此事件
        $("#inputElement").blur(function () {
            console.log("JQ：執行input元件的失去焦點事件");
        });
    });
    function inputOnFocus() {
        console.log("JS：執行input元件的獲得焦點事件");
    }

    function inputOnBlur() {
        console.log("JS：執行input元件的失去焦點事件");
    }
</script>
 

3、監聽input輸入值變化

<div>
    <form action="">
        <input id="inputElement" type="text">
    </form>
</div>
<script>
    $(function () {
        //監聽輸入文字變化
        $("input[id='inputElement']").bind('input propertychange', function () {
            var val = $(this).val();
            console.log(val);
        })
    });
</script>
 

二、select元素操作

動態生成option節點、獲取select選中項：

$(function () {
    initSelectElement();

    $("#citySelectElement").change(function () {
        var selectedValue = $(this).val();
        if (selectedValue.length == 0) {
            alert("當前未選擇城市");
            return;
        }
        alert("select選中項的valuew值：" + selectedValue);
    });

});

//獲取select選中項
function getSelectValue() {
    //var selectedValue = $("#citySelectElement").val();
    //$("#citySelectElement").val()等價於$("#citySelectElement :checked").val()
    var selectedValue = $("#citySelectElement :checked").val();
    if (selectedValue.length == 0) {
        alert("當前未選擇城市");
        return;
    }
    //alert("select選中項的valuew值：" + selectedValue);

    //獲取select中選中的option項
    var selectedOptionObj = $("#citySelectElement :checked");
    alert("選中項：value = " + selectedOptionObj.val() + ", text = " + selectedOptionObj.text());
}

//JS程式碼動態渲染select資料
function initSelectElement() {
    var cityLisy = [
        ["nanning", "南寧市"],
        ["guiping", "桂平市"],
        ["hezhou", "賀州市"]
    ];
    var html = "";
    html += '<option value="">請選擇城市</option>';
    for (var i = 0; i < cityLisy.length; i++) {
        html += '<option value="' + cityLisy[i][0] + '">' + cityLisy[i][1] + '</option>';
    }
    $("#citySelectElement").html(html);
}

三、radio元素操作

1、設定選中radio

<form action="">
    <span><input type="radio" name="sex" value="M" checked="true">男</span>
    <span><input type="radio" name="sex" value="F">女</span>
</form>

<button id="btnTest">選擇男</button>
<button id="btnTest1">選擇女</button>
<script>
    $(function () {

        $('input:radio[name="sex"]').change(function () {
            var val = $('input:radio[name="sex"]:checked').val();
            if (val == null) {
                alert("什麼也沒選中!");
                return false;
            } else {
                alert(val);
            }
        });

        $("#btnTest").click(function () {
            setRadioChecked("sex", "M", true);
            // var val = $('input:radio[name="radios"]:checked').val();
            // if (val == null) {
            //     alert("什麼也沒選中!");
            //     return false;
            // } else {
            //     alert(val);
            // }
        });
        $("#btnTest1").click(function () {
            setRadioChecked("sex", "F", true);
        });
    });

    /**
     * 設定選中單選按鈕
     * @param value
     */
    function setRadioChecked(name, checkedValue, checked) {
        var radios = document.getElementsByName(name);
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].value == checkedValue) {
                radios[i].checked = checked;
                break;
            }
        }
        // var radio = $("input:radio[value="+value+"]");
        // if(radio){
        //     //選中單選按鈕
        //     radio.prop("checked",true);
        // }
    }

</script>

2、單選按鈕change事件

<form action="">
    <input type="radio" name="radios" value="a" checked="true">單選按鈕1
    <input type="radio" name="radios" value="b">單選按鈕2
    <input type="radio" name="radios" value="c">單選按鈕3
</form>

<button id="btnTest">測試</button>

<script>
    $(function () {

        $('input:radio[name="radios"]').change(function () {
            var val = $('input:radio[name="radios"]:checked').val();
            if (val == null) {
                alert("什麼也沒選中!");
                return false;
            } else {
                alert(val);
            }
        });

        $("#btnTest").click(function () {

            var val = $('input:radio[name="radios"]:checked').val();
            if (val == null) {
                alert("什麼也沒選中!");
                return false;
            } else {
                alert(val);
            }
        });
    });
</script>

四、checkbox元素操作

1、設定選中checkbox

<form>
    <div>
        <span><input type="checkbox" name="interest" value="0">跑步</span>
        <span><input type="checkbox" name="interest" value="1">籃球</span>
        <span><input type="checkbox" name="interest" value="2">音樂</span>
    </div>

    <input id="btnTest" type="button" value="全選">
    <input id="btnTest1" type="button" value="全不選">
</form>
<script>
    $(function () {
        $("#btnTest").click(function () {

            var checkedValue = ["0", "1", "2"];
            for (var i = 0; i < checkedValue.length; i++) {
                setCheckbox("interest", checkedValue[i], true);
            }
        });

        $("#btnTest1").click(function () {
            var checkedValue = ["0", "1", "2"];
            for (var i = 0; i < checkedValue.length; i++) {
                setCheckbox("interest", checkedValue[i], false);
            }
        });

        /**
         * 設定checkbox
         */
        function setCheckbox(name, checkedValue, checked) {

            var checkboxs = document.getElementsByName(name);
            for (var i = 0; i < checkboxs.length; i++) {
                if (checkboxs[i].value == checkedValue) {
                    checkboxs[i].checked = checked;
                    break;
                }
            }

        }
    });
</script>

2、判斷checkbox是否選中

<form>
    <input id="checkbox" type="checkbox" value="1">三證合一
    <input id="btnTest" type="button" value="設定checkbox為不選中狀態">
    <input id="btnTest1" type="button" value="設定checkbox為不可用狀態">
</form>
<script>
    $(function () {
        $("#btnTest").click(function () {
            // 判斷checkbox是否選中（jquery 1.6以前版本 用  $(this).attr("checked")）
            alert($("#checkbox").prop("checked"));
            //設定checkbox為不選中狀態
            //$("#checkbox").attr("checked", false);
            $("#checkbox").prop("checked", false);
            //7、設定checkbox為選中狀態
            //$('input:checkbox').attr("checked", 'checked');//or
            //$('input:checkbox').attr("checked", true);
        });

        $("#btnTest1").click(function () {
            console.log("不可用");
            //$("#checkbox").attr("disabled", true);
            $("#checkbox").prop("disabled", true);

        });
    });
</script>

3、change事件

<form>
    <div>
        <input type="hidden" id="cheboxCheckedValuesElement">
        <span><input type="checkbox" onchange="checkboxOnchange(this)" name="interest" value="0">跑步</span>
        <span><input type="checkbox" onchange="checkboxOnchange(this)" name="interest" value="1">籃球</span>
        <span><input type="checkbox" onchange="checkboxOnchange(this)" name="interest" value="2">音樂</span>
    </div>
    <input id="btnTest" type="button" value="設定選中">
</form>

<script>
    $(function () {
        $("#btnTest").click(function () {

        });

    });

    function checkboxOnchange(checkboxObj) {
        var jqobj = $(checkboxObj);
        //獲取value值
        var value = jqobj.val();
        //獲取是否選中
        var checked = jqobj.prop("checked");
        //console.log("value="+value);
        //console.log("checked=" + checked);

        var cheboxCheckedValues = $("#cheboxCheckedValuesElement").val();
        if (cheboxCheckedValues.length > 0) {
            //已經記錄有值
            var arr = cheboxCheckedValues.split(";");
            if (checked == false) {
                var newValues = "";
                //取消選擇，把記錄的value值去掉
                for (var i = 0; i < arr.length - 1; i++) {
                    if (arr[i] != value) {
                        newValues += arr[i] + ";";
                    }
                }
                $("#cheboxCheckedValuesElement").val(newValues);
            } else {
                var cheboxCheckedValues = $("#cheboxCheckedValuesElement").val();
                cheboxCheckedValues += value + ";";
                $("#cheboxCheckedValuesElement").val(cheboxCheckedValues);
            }

        } else {
            cheboxCheckedValues = $("#cheboxCheckedValuesElement").val();
            cheboxCheckedValues += value + ";";
            $("#cheboxCheckedValuesElement").val(cheboxCheckedValues);
        }
        console.log("多選的value陣列：" + $("#cheboxCheckedValuesElement").val());
    }

</script>

下載地址：