安科网

jQuery 绑定事件.bind() 绑定radio值

85931235

85931235

2012-01-11

关注 关注

今天遇到了一个小问题，关于 html 中 radio 值绑定的问题，发现使用 JQuery中的  .bind() 事件 可以更加有效的 达到我需要的功能， 作为笔记记录共享于此，提供给刚入门的新手们参考。 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>JQuery 绑定事件.bind()  绑定radio值</title>  
  6. <script src="../js/jquery.min.js" type="text/javascript"></script>  
  7. </head>  
  8.   
  9. <body>  
  10. <form action="#" method="post">  
  11. <label for="tj1">  
  12.   <input type="radio" name="radio_tj" id="tj1" value="1">  
  13.   资产</label>  
  14. <label for="tj2">  
  15.   <input type="radio" name="radio_tj" id="tj2" value="2">  
  16.   管理</label>  
  17. <label for="tj3">  
  18.   <input type="radio" name="radio_tj" id="tj3" value="3">  
  19.   调度</label>  
  20. <label for="tj4">  
  21.   <input type="radio" name="radio_tj" id="tj4" value="4">  
  22.   电网</label>  
  23. <label for="tj5">  
  24.   <input type="radio" name="radio_tj" id="tj5" value="5" checked>  
  25.   地理</label>  
  26.     
  27. <!-- jquery绑定事件，当radio值发生变化时触发行为 -->   
  28. <script type="text/javascript">   
  29.   
  30.   
  31. $(document).ready(function() {   
  32.   
  33.     //主要 .bind() 事件代码例子：  
  34.     //input标签[标签名称='指定的名称'].绑定函数("事件",自定义函数(){  操作代码...  });  
  35.     //$("input[name='radio_tj']").bind("click",function(){ alert($(this).val()); });  
  36.     $("input[name='radio_tj']").bind("click",function(){  
  37.           
  38.         //测试操作代码  
  39.         alert($(this).val());  
  40.         var $selectedvalue = $(this).val();  
  41.         if ($selectedvalue == 1) {   
  42.             alert("您现在选择备份 资产范围  的数据");  
  43.         }  
  44.         else if ($selectedvalue == 2) {  
  45.             alert("您现在选择备份 管理范围  的数据");  
  46.         }  
  47.         else if ($selectedvalue == 3) {  
  48.             alert("您现在选择备份 调度范围  的数据");  
  49.         }  
  50.         else if ($selectedvalue == 4) {  
  51.             alert("您现在选择备份 电网范围  的数据");  
  52.         }  
  53.         else {    
  54.             alert("您现在选择备份 地理范围  的数据");  
  55.         }   
  56.     });  
  57.       
  58. });  
  59. </script>  
  60. </form>  
  61. </body>  
  62. </html>  

radio font bind jquery事件 jquery

85931235

85931235

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

Selenium系列之--06 CSS SELECTOR选择器的一些写法

//div#radio>input:nth-of-type 选择id为radio的div下的第4个input节点。//input.Volvo[name=‘identity‘] 选择class为.Volvo并且name为identity的input节点

zhanghaibing00 2020-06-28

纯css radio button样式

<input type="radio" checked onclick="editWareHouseIt(this)" id="editOrInsHouse01". <input ty

MaureenChen 2020-05-25

使用CSS修改radio样式

<label> <input class="radio_type" type="radio" />现金</label>

zhanghao 2019-12-20

jQuery 改变checkbox和radio select的样式

<!<!<inputtype="radio"name="radio"class="radio"value="1"checked/>. <input

风飞飘扬 2014-06-24

ElementUI radio 小改造

ElementUI 是自己比较钟爱的一套 vue 组件库，自己好几个项目里都在用它。一直以来这些丰富的组件，让我能快速的搞定各种后台管理页面，极大地提高了工作效率。其中一点就是本文要提到的，radio 绑定对象类型值的问题。具体现象就是，当通过 mapSt

lbPro0 2019-11-03

jquery里的attr和prop的用法注意，解决用attr移除checked选中状态失败的方法

$(":radio").removeAttr(‘checked‘); $(":radio").attr(‘checked‘,‘true‘); 实际问题：在使用removeAttr()移除了radio的check

donghongbz 2019-10-19

jquery radio

// $("#isMainEdN").attr("checked",true);// $("#isMainEdY").attr("checked"

yFifhting 2017-06-08

javascript radio值获取代码

//是否选中 radio,默认不选中，radio 可指定 checked="checked" 不受 flag 影响

miyacnn 2009-03-17

element ui radio组件添加点击可取消选中状态

this.area = '' //如果点击的对象是area就将v-model的值清空 radio状态为空

一片天空 2019-07-01

SMTC：纯CSS 星星打分评价

星星打分评价的页面功能，需求上经常会碰到。网上搜一下，Js + CSS，纯 CSS 的版本也非常多。觉得搜到的都不理想，下意识觉得应该能有更好的实现自己动手尝试一下，果然能更好用所以开篇文章，分享一下 ^_^. 先来 HTML 代码感受下<!-- 不

NARUTOLUOLUO 2019-07-01

用JS和JQuery分别获取表单元素的值(select,checkbox,radio)

废话不多说直接上代码HTML部分<html !<input type="button" value="点击获取下拉列表的值" onclick="getSelectorValue()"&

人心 2019-06-30

总结：如何修改美化radio、checkbox的默认样式

现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。给<input>元素设置为透明，然后通过定位让用户看到的是<labe

攻城师 2019-06-29

jquery radio

// $("#isMainEdN").attr("checked",true);// $("#isMainEdY").attr("checked"

HotStrong 2017-06-08

Jquery 操作Html 控件 CheckBox、Radio、Select 控件

在使用Javascript编写前台脚本的时候，经常会操作Html控件，比如checkbox、radio、select，用Jquery库操作其他会方便很多，下面用Jq对这些控件的操作进行一个全面的代码总结。根据input类型选择：$等同于文档中的$. 结果返

zfjdoreen 2016-04-13

jQuery操作radio、checkbox、select总结

"没有任何单选框被选中" : "已经有选中";jQuery.val(); // 获取一组radio被选中项的值。jQuery.attr; // 设置id=radio2的一项为选中。jQuery.get.checked

89367741 2016-03-30

ionic ion-radio单选按钮效果

<div class="font_12 color_99">hbiao***.yeah.net</div>. <ion-radio ng-model="choice" ng-value=

shiyiboke 2016-03-29

JQuery控制Radio

在开发中经常会用到Radio来实现用户的选择效果，我在项目中积累了一些利用JQUERY来操作Radio的方法，在这里分享一下，供有需要的朋友借鉴。

SinhaengHhjian 2016-01-25

选择控件：select ，radio，checkbox之用jquery获取选中值的小结

最近是因为用到了checkbox ，需要用jquery获取多选框的选择值。虽然简单，但其实自己还是花了一小点时间的（因为不太熟……顺便捎上了select下拉框，radio单选按钮。下面用小的示例整理下如何获取这些选择控件所选中的值。var index =

89453862 2015-10-10

jquery checkbox radio a div 设置不可用/变灰的方法总结

在网页中进行操作的时候，一个常规动作是在表单中点击按钮，但是经常会出现点了按钮以后没有反应，这个时候，用户通常会连点几次，这个可能破坏你原来的预想，例如会导致多次提交。通过将按钮设置为不可用可以防止这类事情发生，也可以让客户知道已经成功点击了。下面是js和

SinhaengHhjian 2015-07-31

Pure CSS content filter

box-shadow: 0 1px 3px rgba, 0 1px 2px rgba;

nicepainkiller 2015-06-19
85931235

85931235

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号