浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)

若是只引用jquery的话，监听单选按钮改变事件如下：

<input type="radio" name="sex" checked="checked" value="1">男
<input type="radio" name="sex" value="2">女
$(document).ready(function() {
 $('input[type=radio][name=sex]').change(function() {
  if (this.value == '1') {
   alert("这是个男孩");
  } else if (this.value == '2') {
   alert("这是个女孩");
  }
 });
});

注意：如果是引用了layui的样式和方法，则上面的监听事件失效，被layui接管了，所以应该如下写法：

layui.use(['form', 'element', 'laydate'], function(){
 var jQuery = layui.jquery
 ,layer = layui.layer
 ,form = layui.form()
 ,element = layui.element();

 form.on("radio(sex)", function (data) {
  var sex = data.value;
  if (this.value == '1') {
   alert("这是个男孩");
  } else if (this.value == '2') {
   alert("这是个女孩");
  }
 });
});

以上这篇浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决layui 表单元素radio不显示渲染的问题

    最近一直在使用layui,一个对程序员相对友好的前端框架,很多效果都进行了初步的封装. 在使用过程中遇到最多的问题就是引用的问题,各种模板无法使用,虽然都一一百度解决. 本次需要解决的问题是 layui-form表单无法渲染效果. 我希望的效果是 但是程序运行效果是 问题分析: 因为这个表单,我是使用laytpl动态插入的,因此表单中radio的效果并没有渲染上,打开调试模式可以看到 正常的radio渲染结果,应该是包括一个i标签和一个span标签 而我们的渲染结果,只有一个input标签 所以

  • layui radio性别单选框赋值方法

    Html <div class="layui-inline"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name="sex" id="sex" value="1" t

  • layui 实现自动选择radio单选框(checked)的方法

    HTML表单: <div class="layui-form-item"> <label class="layui-form-label">消息通知</label> <div class="layui-input-block"> <input name="is_notice" value="1" type="radio" title=

  • layui radio单选限制下一个radio单选的实例

    本demo的效果是单选框一有a和b两个选项按钮,单选框二有q和w两个选项按钮, 选中a,使得q不可选,w选中:选中b,使得w不可选,q选中 下面是完整的代码,需要引入layui.js,layui.css <!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <title>layui</title>   <meta name="rendere

  • Layui之table中的radio在切换分页时无法记住选中状态的解决方法

    情景描述 Layui数据表格中用到了表单元素radio,在当前页面选中radio状态,并同步更新到保存表格中所有的数据的数组中(获取表格中的所有数据并保存到数组中),再点击分页组件中的下一页.上一页.跳转按钮进行切换另外一个页面,然后在切换回之前的页面,会发现在以前页面上radio状态全部恢复默认了,我们当然是希望能保存住前一页radio的选中状态. 我写项目遇到的一个的情况:在第一页选中的radio的状态,点击下一页按钮切换到第二页,然后再点击上一页切换会第一页,第一页中的radio状态就恢复

  • layui radio点击事件实现input显示和隐藏的例子

    如下所示: 前端代码 <link rel="stylesheet" href="/static/index/layui/css/layui.css" rel="external nofollow" > <script type="text/javascript" src="/static/index/layui/layui.js" charset="utf-8">

  • 浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)

    若是只引用jquery的话,监听单选按钮改变事件如下: <input type="radio" name="sex" checked="checked" value="1">男 <input type="radio" name="sex" value="2">女 $(document).ready(function() { $('input[t

  • js实时监听文本框状态的方法

    复制代码 代码如下: <div id="msg"></div> <input type="text" name="txt" id="txt"/> <script> //当状态改变的时候执行的函数 function handle() { document.getElementById('msg').innerHTML = document.getElementById('txt')

  • angular 实时监听input框value值的变化触发函数方法

    用angulajs + ionic 做了一个登陆页面.效果要通过监听输入框的变化来判断登陆按钮是否可点击.当至少一个输入框为空时登录按钮不可点击.一开始是用的jquery的方法做的,后来发现刷新当前页可以实现效果,但是当经过路由跳转后再回到登陆页后,方法就被执行了. 后来经过查找资料,利用angular.js的$watch方法解决了. 代码大概如下: $scope.input = {//初始化,避免ng-model绑定取不到值 Tel:'', Pwd:'' } $scope.$watch('in

  • vue中监听input框获取焦点及失去焦点的问题

    vue中监听input框获取焦点及失去焦点的问题

    目录 一.背景 二.首先是正宗的监听事件的写法 1.html代码 2.JS部分 三.为什么上次监听焦点事件失败呢 1.不好用的原因 2.新增指令的方法 一.背景 博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况.当时百思不得其解.今天又在写vue页面的时候,突然@blur和@focus又好用了.emmmm,看来这部分值得一战. 二.首先是正宗的监听事件的写法 1.html代码 //这是html的输入框.定义了一个获取焦点,失去焦点的方法 <input pla

  • jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <title>单选框radio绑定click事件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="

  • JavaScript监听文本框回车事件并过滤文本框空格的方法

    本文实例讲述了JavaScript监听文本框回车事件并过滤文本框空格的方法.分享给大家供大家参考.具体如下: <script type="text/javascript" language="javascript"> var username = null; var password = null; //获取文本框 onload = function() { username = document.getElementById("txtUser

  • 基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" >

  • python+selenium 点击单选框-radio的实现方法

    例子:以百度文库中选择文档的类型为例 问题一:遍历点击所有文档类型的单选框 # coding=utf-8 from selenium import webdriver from time import sleep driver = webdriver.Chrome() driver.maximize_window() driver.get("http://wenku.baidu.com") driver.implicitly_wait(8) for i in driver.find_e

  • 浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑

    前言 绝大多数网站都集成了第三方登录,降低了注册门槛,增强了用户体验.最近看了看 QQ 互联上 QQ 登录的接口文档.接入 QQ 登录的一般流程呢,是这样的:先申请开发者 -> 然后创建应用(拿到一组 AppId 和 AppKey)-> 获取 access_token -> 获取 openid -> 调用 openApi 访问或修改用户信息. 然而,从申请个人开发者开始,坑就来了. 1. 申请(个人)开发者 QQ 互联中申请开发者信息的页面,一些重点太过简陋,缺失细节,比如身份证正

  • 浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    1.在Vue项目中引用公共方法 作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量.怎么做比较好呢,话不多说直接看代码把 首先 要在main.js中引入公共js.然后,将方法赋在Vue的原型链上. 像图中这样. 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.login(); } /**然后公共方法里写一段简单的代码*/ export defaul

随机推荐