那些經常使用但後臺開發寫起來卻不順手的js——單選按鈕事件

一、用jquery實現 二、用layer實現 三、用vue實現

一、用jquery實現 html頁面以下javascript

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

點擊radio獲取當前點擊的value值html

$(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);
	})
 })

二、用layui實現
html代碼以下vue

<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代碼以下java

<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>

效果如圖
jquery

三、用vue實現app

html代碼以下ui

<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代碼以下:this

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)
            }
		},
        
	});

效果圖:
code

相關文章
相關標籤/搜索