checkbox、select、radio的设置与获取

时间：2023-03-08 20:04:38

参考链接：http://www.cnblogs.com/xiaopin/archive/2011/09/13/2175190.html

js版本：

<!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>

</head>

<body>

复选框：

<input type="checkbox" name="checkbox1" value="1" checked/>1

<input type="checkbox" name="checkbox1" value="2"/>2

<input type="checkbox" name="checkbox1" value="3" checked/>3

<input type="checkbox" name="checkbox1" value="4"/>4

<input type="checkbox" name="checkbox1" value="5"/>5

<br/>

单选框：

<input type="radio" id="radio1" name="radio1" value="1" checked>1

<input type="radio" id="radio2" name="radio1" value="2">2

<input type="radio" id="radio3" name="radio1" value="3">3

<br/>

下拉框：

<select id="select1">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

<br/>

<button onclick="sub();">提交</button><br/>

<button onclick="fun1();">选择4，5复选框</button><button onclick="fun1_2()">全选</button><br/>

<button onclick="fun2();">选择3单选框</button><br/>

<button onclick="fun3();">选择2下拉框</button><br/>

<script type="text/javascript">

    function fun1() {

        //复选框设置值

        var oCheckbox = document.getElementsByName("checkbox1");

        var arr = [];

        var index = 0;

        for (var i = 0; i < oCheckbox.length; i++) {

            if (oCheckbox[i].value == 4 || oCheckbox[i].value == 5) {

                oCheckbox[i].checked = true;

            } else {

                oCheckbox[i].checked = false;

            }

        }

    }

    function fun1_2() {

        //复选框设置值

        var oCheckbox = document.getElementsByName("checkbox1");

        for (var i = 0; i < oCheckbox.length; i++) {

                oCheckbox[i].checked = true;

        }

    }

    function fun2() {

        //单选框设置值

        var oRadio = document.getElementsByName("radio1");

        for (var i = 0; i < oRadio.length; i++) {

            if (oRadio[i].value == 3) {

                oRadio[i].checked = true;

                break;

            }

        }

    }

    function fun3() {

        //下拉框设置值

        var oSelect = document.getElementById("select1");

        oSelect.value = 2;

        //由option的text来选中选中

        for (i = 0; i < oSelect.options.length; i++) {

            alert("Element " + i + " is " + oSelect.options(i).text +

            " and has the value " + oSelect.options(i).value);

        }

        oSelect.options(0).selected = true;

    }

    function sub() {

        //复选框获取值

        var oCheckbox = document.getElementsByName("checkbox1");

        var arr = [];

        var index = 0;

        for (var i = 0; i < oCheckbox.length; i++) {

            if (oCheckbox[i].checked) {

                arr[index++] = oCheckbox[i].value;

            }

        }

        alert("复选框：" + arr.toString());

        //单选框获取值

        var oRadio = document.getElementsByName("radio1");

        var rvalue = 0;

        for (var i = 0; i < oRadio.length; i++) {

            if (oRadio[i].checked) {

                rvalue = oRadio[i].value;

                break;

            }

        }

        alert("单选框：" + rvalue);

        //下拉框获取值

        var oSelect = document.getElementById("select1");

        alert("下拉框：" + oSelect.value);

    }

</script>

</body>

</html>

jQuery版本：

<!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>

    <script type="text/javascript" src="../js/jquery-1.10.2.js"></script>

</head>

<body>

复选框：

<input type="checkbox" name="checkbox1" value="1" checked/>1

<input type="checkbox" name="checkbox1" value="2"/>2

<input type="checkbox" name="checkbox1" value="3" checked/>3

<input type="checkbox" name="checkbox1" value="4"/>4

<input type="checkbox" name="checkbox1" value="5"/>5

<br/>

单选框：

<input type="radio" id="radio1" name="radio1" value="1" checked>1

<input type="radio" id="radio2" name="radio1" value="2">2

<input type="radio" id="radio3" name="radio1" value="3">3

<br/>

下拉框：

<select id="select1">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

<br/>

<button onclick="sub();">提交</button><br/>

<button onclick="fun1();">选择4，5复选框</button><br/>

<button onclick="fun2();">选择3单选框</button><br/>

<button onclick="fun3();">选择2下拉框</button><br/>

<script type="text/javascript">

    $(document).ready(function () {

    });

    function fun1() {

        //复选框设置值

        var oCheckbox = $("input[name=checkbox1]");

        var arr = [];

        var index = 0;

        for (var i = 0; i < oCheckbox.length; i++) {

            if (oCheckbox[i].value == 4 || oCheckbox[i].value == 5) {

                oCheckbox[i].checked = true;

            } else {

                oCheckbox[i].checked = false;

            }

        }

    }

    function fun2() {

        //单选框设置值

        var oRadio = $("input[name=radio1]");

        for (var i = 0; i < oRadio.length; i++) {

            if (oRadio[i].value == 3) {

                oRadio[i].checked = true;

                break;

            }

        }

    }

    function fun3() {

        //下拉框设置值

        var oSelect = $("#select1");

        oSelect.val(2);

    }

    function sub() {

        //复选框获取值

        var oCheckbox = $("input[name=checkbox1]");

        var arr = [];

        var index = 0;

        for (var i = 0; i < oCheckbox.length; i++) {

            if (oCheckbox[i].checked) {

                arr[index++] = oCheckbox[i].value;

            }

        }

        alert("复选框：" + arr.toString());

        //单选框获取值

        var oRadio = $("input[name=radio1]");

        var rvalue = 0;

        for (var i = 0; i < oRadio.length; i++) {

            if (oRadio[i].checked) {

                rvalue = oRadio[i].value;

                break;

            }

        }

        alert("单选框：" + rvalue);

        //下拉框获取值

        var oSelect = $("#select1");

        alert("下拉框：" + oSelect.val());

    }

</script>

</body>

</html>

相关文章