使用 jquery 单击单选按钮

📌 相关文章

📜 使用 jquery 单击单选按钮 - Javascript (1)

📅 最后修改于: 2023-12-03 15:36:30.722000 🧑 作者: Mango

在 web 开发中，常常需要在表单中使用单选按钮来让用户进行选择。而在 JavaScript 中，可以使用 jQuery 提供的方法来添加单击事件，实现单选按钮的交互效果。

添加单击事件

要添加单击事件，需要使用 click 方法。下面是一个例子：

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery 单击单选按钮</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <form>
      <label><input type="radio" name="gender" value="male">男</label>
      <label><input type="radio" name="gender" value="female">女</label>
    </form>

    <script>
      // 为单选按钮添加单击事件
      $('input[type=radio]').click(function() {
        console.log($(this).val());  // 打印选中的值
      });
    </script>
  </body>
</html>

上面的例子为表单中的两个单选按钮添加了单击事件，当用户单击某个单选按钮时，控制台将输出该按钮的值。其中，$() 是 jQuery 的选择器方法，表示选择指定元素。这里选择了所有类型为 radio 的输入框。

代码片段

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery 单击单选按钮</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <form>
      <label><input type="radio" name="gender" value="male">男</label>
      <label><input type="radio" name="gender" value="female">女</label>
    </form>

    <script>
      $('input[type=radio]').click(function() {
        console.log($(this).val());
      });
    </script>
  </body>
</html>

以上是基本的单击单选按钮的使用方法，可以根据实际需求进行修改和扩展。