PHP历理 layer的单选框和复选框
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$type = $_POST['type'];
$hobbies = $_POST['hobby'];
echo "接收到的爱好类型：". $type. "<br>";
echo "接收到的具体爱好：". implode("", $hobbies);
//echo var_dump($hobbies);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>测试</title>
<link rel="stylesheet" href="/_/_js/layui/css/layui.css">
<link rel="stylesheet" href="/_/_css/base.css">
<script src="/_/_js/layui/layui.js"></script>
<script src="/_/_js/jquery-1.10.1.min.js"></script>
</head>
<style>
.layui-form-radio {
display: inline-flex !important;
align-items: center;
vertical-align: middle;
padding-right: 3px !important;
}
.layui-form-radio > i {
margin-right: 4px;
}
</style>
<body>
<form class="layui-form" action="" method="post" lay-filter="myForm">
<div class="layui-form-item">
<div class="layui-form-item">
<label class="layui-form-label">选择爱好</label>
<div class="layui-input-block">
<input type="radio" name="type" value="A" title="A" >
<input type="radio" name="type" value="B" title="B">
<input type="radio" name="type" value="C" title="C">
<input type="radio" name="type" value="D" title="D">
<input type="radio" name="type" value="E" title="E" checked>
<input type="radio" name="type" value="F" title="F">
<input type="radio" name="type" value="G" title="G">
<input type="radio" name="type" value="H" title="H">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">具体爱好</label>
<div class="layui-input-block">
<input type="checkbox" name="hobby[]" value="A" title="A">
<input type="checkbox" name="hobby[]" value="B" title="B" checked>
<input type="checkbox" name="hobby[]" value="C" title="C" checked>
<input type="checkbox" name="hobby[]" value="D" title="D">
<input type="checkbox" name="hobby[]" value="E" title="E" checked>
<input type="checkbox" name="hobby[]" value="F" title="F" checked>
<input type="checkbox" name="hobby[]" value="G" title="G">
<input type="checkbox" name="hobby[]" value="H" title="H" checked>
<input type="checkbox" name="hobby[]" value="I" title="I" checked>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submit">提交</button>
</div>
</div>
</form>
<script>
layui.use(['form', 'layer'], function () {
var form = layui.form;
var layer = layui.layer;
form.on('submit(submit)', function (data) {
var type = data.field.type;
var hobbies = [];
$('input[name="hobby[]"]:checked').each(function() {
hobbies.push($(this).val());
});
alert("选择爱好：" + type);
alert("具体爱好：" + hobbies.join(', '));
if (!type) {
layer.msg('请选择爱好类型');
return false;
}
if (!hobbies || hobbies.length == 0) {
layer.msg('请选择至少一个具体爱好');
return false;
}
return true;
});
form.render();
});
</script>
</body>
</html>
效果图：
浙公网安备 33010602011771号