Jquery教程
Jquery动效
Jquery HTML/CSS
Jquery 事件
jquery常用

Jquery radio按钮

单选按钮是一个小圆圈,允许用户从多个选项中仅选择一个相关选项。通常,单选按钮用于注册表格,考试门户,测验门户等。

选中/未选中的单选按钮

在选中的单选按钮中,仅一次选择一个选项。
我们使用jQuery .prop()方法在创建选中/未选中的单选按钮。
语法:
用于选中的单选按钮
$("element").prop("checked", true)
对于未选中的单选按钮
$("element").prop("checked", false)

代码:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>jQuery radio button example</title>
    <!-- jQuery CDN -->
    <script src = "https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
    .container {
        align: "center"
    }
</style>
</head>
<body>
    <div class = "jumbotron">
  <h1 style="color: black;"> jQuery checked/unchecked radio button</h1>
    <div class = "container text-center">
        <h3>Select your gender</h3>
    <label><input type = "radio" name = "gender" id = "male">Male</label>
    <label><input type = "radio" name = "gender" id = "female">Female</label>
</p>
</div>
<!-- Script for checked radio button -->
    <script type="text/javascript">
        $(document).ready(function () {
                $("#male").prop("checked", true);
        });
    </script>
    </div>
</body>
</html>
输出:
jQuery单选按钮

根据按钮单击选择单选按钮

jQuery还允许我们根据用户单击的按钮选择相关的单选按钮。
语法:
$(".button1").click(function () {
          $("#element1").prop("checked" , true)
         });
代码:
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title> Radio button based on button click </title>
    <style>
        .container {
            text-align: center;
            margin: 50px;
        }
    </style>
    <!-- jQuery CDN -->
    <script src = "/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Add javascript -->
    <script type = "text/javascript">
     $(document).ready(function () {
        // check radio botton element (y) on clicking the button 1 (yes)
         $(".yes").click(function () {
          $("#y").prop("checked" , true)
         });
       // check radio botton element (n) on clicking the button 2 (no)
         $(".no").click(function () {
          $("#n").prop("checked" , true)
         });
        // uncheck both radio buttons element on clicking the reset button
         $(".reset").click(function () {
         $("#y").prop("checked" , false)
         $("#n").prop("checked" , false)
       });
     });
    </script>
    <!-- Script closed -->
</head>
<body>
    <div class = "container">
    <h2 style="color:rgb(8, 43, 109)"> Are you eligible for vote ? </h2>
   <p>
       <input type = "radio" name = "laguage" id = "y">Y
       <input type = "radio" name = "laguage" id = "n">N
    </p>
    <p>
        <input type = "button" class = "yes" value = "Yes">
        <input type = "button" class = "no" value = "No">
        <input type = "button" class = "reset" value = "reset">
     </p>
</div>
</body>
</html>
输出:
单击"是"按钮 jQuery单选按钮 单击"否"按钮 jQuery单选按钮 点击重置按钮 jQuery单选按钮

获取选中的选中单选按钮值

.val()方法用于轻松获取选中的选中单选按钮值。
<!DOCTYPE html>
<html>
<head>
    <title> Get Selected radio button value exmaple </title>
    <!-- Add jQuery and Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"> </script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <form name = "jd" action="">
        <div class = "wrapper">
            <h1 align = "center" style="margin-top: 40px; padding: 20px;"> Get radio button value example </h1>
            <div class = "row">
                <div class = "col-md-4 offset-4">
                    <div class = "card mt-3">
                        <div class = "form-group text-center bg-light">
                            <div class = "card-header bg-success">
                                <h2 class = "form-group-heading text-center"> Seleat a Course </h2>
                            </div>
                            <form action = "/action_page.php">
                                <label>
                                    <input type = "radio" name = "course" onclick = "myCourseFunction(this.value)"
                                        value = "Java">Java
                                </label>
                                <label>
                                    <input type = "radio" name = "course" onclick = "myCourseFunction(this.value)"
                                        value = "C Language">C Language
                                </label>
                                <label>
                                <input type = "radio" name = "course" onclick = "myCourseFunction(this.value)"
                                    value = "C++">C++
                                    </label>
                                    <label>
                                <input type = "radio" name = "course" onclick = "myCourseFunction(this.value)"
                                    value = "Python">Python
                                    </label>
                                <br><br>
                                Your Selected Course is: <input type = "text" id = "result">
                                <input type = "submit" value = "Submit">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!-- Add script -->
    <script>
        function myCourseFunction(course) {
            document.getElementById("result").value = course;
        }
    </script>
</body>
</html>
输出1:
单击Java单选按钮时,文本框显示您选择的课程为java。
jQuery单选按钮
输出2:
单击C语言单选按钮时,文本框显示您选择的课程为C语言。
jQuery radio button
输出3:
单击C ++单选按钮时,文本框显示您选择的课程为C++。
jQuery单选按钮
输出4:
单击" Python"单选按钮时,文本框显示您选择的课程是 Python
jQuery单选按钮

单选按钮验证

在jQuery单选按钮验证中,我们将对单选按钮(单选按钮)不能为空进行验证。
例如,如果任何用户不检查单选按钮,则他/她将收到错误消息。
要在jQuery中应用单选按钮验证,请使用以下脚本-
<script>
       $(document).ready(function() {
         $("#button").click(function() {
             var x = $("input[type = 'radio']:checked");
             if(x.length>0)
             {
                alert("Course selected successfully!!!");
                 return true;
             }
             else {
                    $("#radio_error").text("please select a course");
                    return false;
             }
         });
       });
    </script>
代码:
<!DOCTYPE html>
<html>
<head>
    <title> Radio button validation </title>
    <!-- Add Bootstrap and jQuery CDN -->
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
 <style>
     #radio_error {
         color: red;
         font-size: 18;
     }
     .container {
         text-align: center;
         height: 30px;
         width: 350px;
     }
 </style>
<body>
    <h1 align = "center" style = "margin-top: 20px; padding: 12px; color: black">Radio button validation</h1>
    <div class = "container">
        <div class = "card mt-2 offset-0">
        <h2 style="color: darkgreen;">Select a Course</h2>
        <form>
        <label>
            <input type = "radio" name = "course" class = "course" value = "btech">B.Tech
        </label>
        <br>
        <label>
            <input type = "radio" name = "course" class = "course" value = "mtech">M.Tech
        </label>
        <br>
        <label>
            <input type = "radio" name = "course" class = "course" value = "bca">BCA
        </label>
        <br>
        <label>
            <input type = "radio" name = "course" class = "course" value = "mca">MCA
        </label>
        <br>
        <font id = "radio_error"></font>
        <br>
        <label>
            <input type = "submit" name = "submit" value = "Submit" id = "mysbutton">
        </label>
    </form>
    </div>
    </div>
    <script src = "text/script"></script>
    <!-- Script to add radio button validation -->
    <script>
       $(document).ready(function() {
         $("#mysbutton").click(function() {
             var x = $("input[type = 'radio']:checked");
             if(x.length>0)
             {
                alert("Course selected successfully!!!");
                 return true;
             }
             else {
                    $("#radio_error").text("please select a course");
                    return false;
             }
         });
       });
    </script>
    <!-- Script ends -->
</body>
</html>
输出
选择单选按钮,然后单击提交按钮。将出现一个弹出窗口,显示: 课程选择成功。 jQuery单选按钮 只需单击"提交"按钮,就会出现一条错误消息,提示: 请选择一门课程。 jQuery单选按钮

显示和隐藏单选按钮内容

在jQuery中, show()和hide()方法用于显示和隐藏内容。
代码:
<!DOCTYPE html>
<html>
<head>
    <title> Radio button validation </title>
    <!-- Add Bootstrap and jQuery CDN -->
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"> </script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"> </script>
</head>
<style>
    #radio_error {
        color: red;
        font-size: 18;
    }
    .container {
        text-align: center;
        height: 90px;
        width: 450px;
    }
    #container {
        border: 2px sloid black;
        background-color: aqua;
        color: green;
        margin: 10px;
        padding: 5px;
        }
</style>
<body>
    <h1 align = "center" style = "margin-top: 20px; padding: 12px; color: black"> Show/Hide Radio button Content </h1>
    <div class = "container">
        <div class = "card mt-2 offset-0">
            <h2 style = "color: darkgreen;"> Show and hide Content </h2>
            <form>
                <label>
                    <input type = "radio" name = "sh" id = "hi" value = "hide">Hide Content
                </label>
                <br>
                <label>
                    <input type = "radio" name = "sh" id = "sh" value = "show">Show Content
                </label>
                <div id = "container">
                    <!-- Content that displayed after clicking the Show Content radio button -->
                    <h3>Welcome to lidihuo</h3>
                </div>
            </form>
        </div>
    </div>
    <script src = "text/script"></script>
    <!-- Script to add show and hide content -->
    <script>
        $(document).ready(function () {
            $("div#container").hide();
            $("input[name=sh]").on("click", function () {
                var selectedValue = $("input[name=sh]:checked").val();
                if (selectedValue == "show") {
                    $("div#container").show();
                }
                else {
                    if (selectedValue == "hide") {
                        $("div#container").hide();
                    }
                }
            });
        });
    </script>
    <!-- Script ends -->
</body>
</html>
输出:

Show/Hide Radio button Content

Show and hide Content


Welcome to lidihuo

昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4