jQuery :checked 选择器

jQuery :checked 选择器

jQuery :checked选择器是用来选择所有选中的复选框,单选按钮和选择元素的选项。

注意:要只检索选择元素的选定选项,请使用:选定的选择器。

语法:

$(":checked")

下面的例子说明了jQuery中的:checked选择器。

例子1:这个例子将CSS应用于所有的复选元素(在这个例子中是复选框)。

<!DOCTYPE html>
<html>
<head>
  <title>
    jQuery | :checked Selector
  </title>
  <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <!-- Script to set style in checked selector -->
  <script>
    (document).ready(function () {
      (":checked").wrap("<span style='background-color:blue'>");
    });
  </script>
  <style>
    form {
      font-weight: bold;
      font-size: 25px;
      color: green;
    }
  </style>
</head>
<body style="text-align:center;">
  <h1>
    jQuery | :checked Selector
  </h1>
  <form action="">
    GeeksForGeeks_1
    <input type="checkbox" name="GFG_1"
      value="GFG_1" checked="checked">
    <br>
    GeeksForGeeks_2
    <input type="checkbox" name="GFG_2"
      value="GFG_2">
    <br>
    GeeksForGeeks_3
    <input type="checkbox" name="GFG_3"
      value="GFG_3" checked="checked">
    <br>
  </form>
</body>
</html>

输出:

jQuery :checked 选择器

实例2:本例在单选按钮上使用选中的选择器。

<!DOCTYPE html>
<html>
<head>
  <title>
    jQuery | :checked Selector
  </title>
  <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <!-- Script to set style in checked selector -->
  <script>
    (document).ready(function () {
      (":checked").wrap("<span style='background-color:red'>");
    });
  </script>
  <style>
    form {
      font-weight: bold;
      font-size: 25px;
      color: green;
    }
  </style>
</head>
<body style="text-align:center;">
  <h1>
    jQuery | :checked Selector
  </h1>
  <form action="">
    GeeksForGeeks_1
    <input type="radio" name="GFG_1"
      value="GFG_1" checked="checked">
    <br>
    GeeksForGeeks_2
    <input type="radio" name="GFG_2"
      value="GFG_2">
    <br>
    GeeksForGeeks_3
    <input type="radio" name="GFG_3"
      value="GFG_3" checked="checked">
    <br>
  </form>
</body>
</html>

输出:

jQuery :checked 选择器

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程