淺談監(jiān)聽單選框radio改變事件(和layui中單選按鈕改變事件)

更新時間：2019年09月10日 15:37:07 作者：林建龍

今天小編就為大家分享一篇淺談監(jiān)聽單選框radio改變事件(和layui中單選按鈕改變事件)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

若是只引用jquery的話，監(jiān)聽單選按鈕改變事件如下：

<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的樣式和方法，則上面的監(jiān)聽事件失效，被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("這是個女孩"); 
  } 
 });
});

以上這篇淺談監(jiān)聽單選框radio改變事件(和layui中單選按鈕改變事件)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JavaScript設計模式之觀察者模式與發(fā)布訂閱模式詳解
這篇文章主要介紹了JavaScript設計模式之觀察者模式與發(fā)布訂閱模式,結(jié)合實例形式詳細分析了JavaScript觀察者模式與發(fā)布訂閱模式相關概念、原理
2020-05-05
webpack4簡單入門實例
這篇文章主要介紹了webpack4簡單入門實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
基于JavaScript實現(xiàn)復選框的全選和取消全選
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)復選框的全選和取消全選，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
JavaScript實現(xiàn)鼠標懸浮頁面切換效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)鼠標懸浮頁面切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
小程序?qū)崿F(xiàn)計時器功能
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)計時器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
JavaScript中內(nèi)存泄漏的幾種情況總結(jié)
在JavaScript中，內(nèi)存泄漏通常是由于變量、對象、閉包、事件監(jiān)聽器等長期存在而沒有被釋放引起的。本文就來和大家總結(jié)一下常見的幾種情況以及解決方法吧
2023-05-05
canvas實現(xiàn)探照燈效果
本文介紹了使用clip()方法實現(xiàn)一個探照燈效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
TypeScript?類型斷言的幾種實現(xiàn)
本文主要介紹了TypeScript?類型斷言的實現(xiàn)，有使用關鍵字as和標簽<>兩種方式，具有一定的參考價值，感興趣的可以了解一下
2024-01-01
js實現(xiàn)向右橫向滑出的二級菜單效果
這篇文章主要介紹了js實現(xiàn)向右橫向滑出的二級菜單效果,涉及javascript鼠標事件及頁面元素的隱藏與顯示實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
正則中的回溯定義與用法分析【JS與java實現(xiàn)】
這篇文章主要介紹了正則中的回溯定義與用法,結(jié)合實例形式分析了回溯的概念、功能并提供了JS與java實現(xiàn)方法,需要的朋友可以參考下
2016-12-12