那些常用但后台开发写起来却不顺手的js——单选按钮事件

1、用jquery实现 2、用layer实现 3、用vue实现

1、用jquery实现 html页面如下

 <div id='demo'>
     <input type='radio'  name='sex'  value='男' >男    
     <input type='radio'  name='sex'  value='女' checked='checked'> 女
 </div>

点击radio获取当前点击的value值

$(function(){
	$("#demo :radio").on('click', function () {
			var item= $(this).val();
			alert(item)
			console.log(item);
	})
 })
 
 // 或者
 $("input[type=radio][name=sex]").on('click', function () {
		    var item=$('input:radio[name="sex"]:checked').val();
			alert(item)
			console.log(item);
	})
	
 // 又或者
 $(function(){
	//$("#demo :radio").on('click', function () {
	$("input[type=radio][name=sex]").on('click', function () {
			var item= $(this).val();
			alert(item)
			console.log(item);
	})
 })

2、用layui实现
html代码如下

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" lay-filter="sex1" title="男" checked="">
      <input type="radio" name="sex" value="女" lay-filter="sex1" title="女">
    </div>
  </div>
</form>

js代码如下

 <script type="text/javascript">
	layui.use(['element','form', 'table','layer'], function () {
	  let form = layui.form, layerDom = layui.layer, element = layui.element;
	  form.render()
	  form.on('radio(sex1)', function (data) {
				//alert(data.elem);
				//console.log(data.elem);
				alert(data.value);//判断单选框的选中值
				//console.log(data.value);
	  });

	})
  </script>

效果如图

3、用vue实现

html代码如下

<div id="app">
  <form action="">
  <div >
    <label >单选框</label>
    <div >
      <input type="radio" name="sex" value="男" @click='checkedValue("男")' title="男" checked="checked">男
      <input type="radio" name="sex" value="女" @click='checkedValue("女")' title="女">女
    </div>
  </div>
</form>
</div>

js代码如下：

var app = new Vue({
		el:'#app',
		data:{
			type:'',
		},
		created:function(){
			var _this = this;
		},
		methods:{
            submit: function () {

            },
			checkedValue:function(val){
				let _this = this
				_this.type = val
                alert(val)
            }
		},
        
	});

效果图：

来源：oschina

链接：https://my.oschina.net/u/2301293/blog/3126212

标签

radio

input

jquery