整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
是在搜索經驗的時候，發現很多網友給出的代碼有缺失，不適合小白開發
所以，小小整理一番，歡迎指摘 …
操作步驟：
首先 html 設計效果如下：
對應的源碼為：
<div class="layui-form-item">
<label class="layui-form-label">主題類型：</label>
<div class="layui-input-inline" style="width: 660px">
<input type="radio" name="level" lay-filter="levelM" value="1" title="一級分類" {$theme.level=="1"?"checked":""}>
<input type="radio" name="level" lay-filter="levelM" value="2" title="二級分類" {$theme.level=="2"?"checked":""}>
<input type="radio" name="level" lay-filter="levelM" value="3" title="三級分類" {$theme.level=="3"?"checked":""}>
</div>
</div>【注】:
注意上述源碼總的 "lay-filter" 屬性;
此處需要填寫一個用于區分監聽事件的名稱，我定為："levelM"
因為鄙人在進行 ThinkPHP 框架代碼開發，所以其中牽扯到了部分內置代碼，可自行忽略
然后就是 JavaScript 代碼的編寫，完整的代碼如下：
layui.use(['form'], function () {
var upload = layui.upload;
var form = layui.form;
//此處即為 radio 的監聽事件
form.on('radio(levelM)', function(data){
console.log(data.elem); //得到radio原始DOM對象
console.log(data.value); //被點擊的radio的value值
var level = data.value;//被點擊的radio的value值
$(".sel-parent-msg").hide();
$(".sel-parent-msg-"+level).show();
});
});好像，大概，也許，差不多就是這樣的了 …
Radio Object
Radio 對象代表 HTML 表單中的單選按鈕。
在 HTML 表單中 <input type="radio"> 每出現一次，一個 Radio 對象就會被創建。
單選按鈕是表示一組互斥選項按鈕中的一個。當一個按鈕被選中，之前選中的按鈕就變為非選中的。
當單選按鈕被選中或不選中時，該按鈕就會觸發 onclick 事件句柄。
您可通過遍歷表單的 elements[] 數組來訪問 Radio 對象，或者通過使用 document.getElementById()。
Radio 對象屬性
W3C: W3C 標準。
| 屬性 | 描述 | W3C |
|---|---|---|
| checked | 設置或返回單選按鈕的狀態。 | Yes |
| defaultChecked | 返回單選按鈕的默認狀態。 | Yes |
| disabled | 設置或返回是否禁用單選按鈕。 | Yes |
| form | 返回一個對包含此單選按鈕的表單的引用。 | Yes |
| name | 設置或返回單選按鈕的名稱。 | Yes |
| type | 返回單選按鈕的表單類型。 | Yes |
| value | 設置或返回單選按鈕的 value 屬性的值。 | Yes |
標準屬性和事件
Radio對象同樣支持標準的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
label{
margin:5px;
}
.input-radio{
display: none;
}
.span-radio{
display: inline-block;
border:1px solid #ccc;
width:16px;
height: 16px;
border-radius:2px;
vertical-align: middle;
margin-right: 5px;
position: relative;
}
.span-radio:before{
content: '';
font-size: 0;
width: 10px;
height: 10px;
background: blue;
position: absolute;
left:50%;
top:50%;
margin-left: -5px;
margin-top: -5px;
border-radius: 2px;
display: none;
}
/* ~代表選擇checked的后面的兄弟節點,顯示選中背景框*/
.input-radio:checked~.span-radio:before{
display: block;
}
</style>
</head>
<body>
<label>
<input type="radio" name="evaluate" id="radio1" class="input-radio">
<span class="span-radio"></span>優
</label>
<label>
<input type="radio" name="evaluate" id="radio2" class="input-radio">
<span class="span-radio"></span>良
</label>
<label>
<input type="radio" name="evaluate" id="radio3" class="input-radio">
<span class="span-radio"></span>中
</label>
</body>
</html>
果圖
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
