一、用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