提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

HTML JQuery获取表单单选框选中的值

jQueryHTML 获取 表单 选中 单选框
2023-09-27 14:29:24 时间

 JQuery获取表单单选框选中的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<form name="a" id="a" action="#" method="post">
    <input type="radio" name="num1" id="username" value="1"> 用户名1
    <input type="radio" name="num1" id="passwd" value="2"> 用户名2
    <input type="button" value="提交" onclick="click1()" />
</form>

</body>

<script>
    function click1(){
        var radio=document.getElementsByName("num1");
        var selectvalue=null;   //  selectvalue为radio中选中的值
        for(var i=0;i<radio.length;i++){
            if(radio[i].checked==true) {
                selectvalue=radio[i].value;
                break;
            }
        }
        console.log('selectvalue = ', selectvalue)
    }
</script>
</html>

封装了函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<form name="a" id="a" action="#" method="post">
    <input type="radio" name="num1" id="username" value="1" checked> 用户名1
    <input type="radio" name="num1" id="passwd" value="2"> 用户名2
    <input type="button" value="提交" onclick="click1()" />
</form>

</body>

<script>
    function get_single_checked_val (name) {
        var radio=document.getElementsByName(name);
        var selectvalue=null;   //  selectvalue为radio中选中的值
        for(var i=0;i<radio.length;i++){
            if(radio[i].checked==true) {
                selectvalue=radio[i].value;
                break;
            }
        }
        return selectvalue

    }
    function click1(){
        var select_val1 = get_single_checked_val("num1")
        console.log('select_val1 = ', select_val1)
    }
</script>
</html>

console.log()： 

 

相关文章