ปุ่มสีฟ้า = ปุ่มรายการ
card = checkbox ในกรอบ
ที่ต้องการคือ
ให้กดปุ่มสีฟ้า แล้วแสดงผลที่กรอบ
เมื่อเสร็จแล้วกดปุ่ม submit
ผมเข้าใจถูกต้องหรือเปล่าครับ?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(function(){
$(".list").click(function(){
var val=$(this).val(); //ค่าของปุ่มรายการ
var listVal=$("#list").val(); //ค่าที่เก็บไว้
if(listVal.indexOf(val)==-1){ //เช็คค่าซ้ำ
html='<input type="checkbox" value="' val '"> ' $(this).text(); //สร้าง html tag
$("#card").append(html); //เพิ่ม html tag ลงใน card
$("#list").val(listVal ',' val); //เก็บค่าของรายการที่เพิ่มลงแล้ว
}
});
});
</script>
</head>
<body>
<form>
<button class="list" type="button" value="1">ข้าวผัดหมู</button>
<button class="list" type="button" value="2">ข้าวผัดไก่</button>
<button class="list" type="button" value="3">ข้าวผัดทะเล</button>
<button class="list" type="button" value="4">ข้าวผัดหมูกรอบ</button>
<div id="card"></div>
<input type="hidden" name="list" id="list"> <!-- ใช้สำหรับเก็บค่าของรายการที่เพิ่มลงแล้ว -->
<button type="submit" >submit</button>
</form>
</body>
</html>