การเลือก checkbox อย่างน้อย 1 รายการ ในหัวข้อใหญ่แบบหลายข้อ
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา การเลือก checkbox อย่างน้อย 1 รายการ ในหัวข้อใหญ่แบบหลายข้อ
การเลือก checkbox อย่างน้อย 1 รายการ ในหัวข้อใหญ่แบบหลายข้อ
จากโค้ดนี้ ถ้ามีข้อใหญ่แค่ ข้อเดียว มันเช็คได้ว่าให้เลือกcheckbox อย่างน้อย 1 ข้อ
แต่พอมีข้อใหญ่แบบหลายๆข้อ มันเช็คไม่ได้
ต้องรบกวนคุณนิคอีกแล้วครับผม
<div class="container">
<br>
<form id="myform1" name="form1" method="post" action="" novalidate>
<div class="form-group row">
<label for="input_name" class="col-sm-3 col-form-label text-right">ชื่อ นามสกุล</label>
<div class="col">
<input type="text" class="form-control" name="input_name" id="input_name"
autocomplete="off" value="" required>
<div class="invalid-feedback">
กรุณากรอกชื่อ นามสกุล
</div>
</div>
</div>
<script language=Javascript>
function show7(str){
document.getElementById('sh9').style.display = 'none';
document.getElementById('sh8').style.display = 'none';
document.getElementById('sh7').style.display = 'block';
}
function show8(sign){
document.getElementById('sh9').style.display = 'none';
document.getElementById('sh8').style.display = 'block';
document.getElementById('sh7').style.display = 'none';
}
function show9(sign){
document.getElementById('sh9').style.display = 'block';
document.getElementById('sh8').style.display = 'none';
document.getElementById('sh7').style.display = 'none';
}
</script>
<h4>ด้านการเรียน*</h4>
<div class="form-check">
<input type="radio" name="learning" value="1" class="form-check-input" style="height:20px; width:20px;" required <?php if ($row->learning=="1")echo 'checked';else echo 'checked'; ?> onChange="show7(this.value)"/> ปกติ
</div>
<div class="form-check">
<input type="radio" name="learning" value="2" class="form-check-input" style="height:20px; width:20px;" required <?php if ($row->learning=="2")echo 'checked'; ?> onChange="show8()"/> เสี่ยง
</div>
<div id="sh7"></div>
<div id="sh8" style="display:none;">
<?php
$learningrisky_checked=array();
for($i=0;$i<=10;$i++){
$learningrisky_checked=str_split($row->learningrisky);
//print_r($learningrisky_checked);
switch ($i) {
case 0 :$text='ผลการเรียนเฉลี่ย 1.00 – 1.75';break;
case 1 :$text='ไม่เข้าเรียน 1-2 ครั้ง/สัปดาห์';break;
case 2 :$text='ไม่มีอุปกรณ์การเรียนมาเรียนหรือนําอุปกรณ์การเรียนมาไม่ครบในบางครั้ง';break;
case 3 :$text='ขาดเรียนบ่อย';break;
case 4 :$text='เข้าห้องเรียนช้าบ่อย';break;
case 5 :$text='คํานวน บวก ลบ คูณ หาร ไม่คล่อง';break;
case 6 :$text='ติด 0 ร มส. มผ. 1-2 วิชา/ภาคเรียน';break;
case 7 :$text='มาเรียนสาย 1-3 ครั้ง/สัปดาห์';break;
case 8 :$text='ไม่ส่งงานบ่อย';break;
case 9 :$text='อ่านหรือสะกดคําไม่คล่อง';break;
case 10 :$text='ไม่ตั้งใจเรียนขณะครูสอน';break;
default :
}
?>
<div class="form-check">
<input type="checkbox" name="learningrisky<?php echo $i; ?>" value="Y" class="form-check-input required" style="height:20px; width:20px;" <?php if ($learningrisky_checked[$i]=="Y")echo 'checked'; ?> required id="learningrisky<?php echo $i; ?>" />
<label class="form-check-label" for="learningrisky<?php echo $i; ?>">
<?php echo $text; ?>
</label>
</div>
<?php }?>
</div>
<div class="form-check">
<input type="radio" name="learning" value="3" class="form-check-input" style="height:20px; width:20px;" required <?php if ($row->learning=="3")echo 'checked'; ?> onChange="show9()"/> มีปัญหา
<div class="invalid-feedback">กรุณาเลือกด้านการเรียน</div>
</div>
<div id="sh9" style="display:none;">
<?php
$learningproblem_checked=array();
for($i=0;$i<=8;$i++){
$learningproblem_checked=str_split($row->learningproblem);
switch ($i) {
case 0 :$text='ผลการเรียนต่ำกว่า 1.00';break;
case 1 :$text='ไม่เข้าเรียนมากกว่า 2 ครั้ง/สัปดาห์';break;
case 2 :$text='ไม่มีอุปกรณ์การเรียนมาเรียนหรือนําอุปกรณ์การเรียนมาไม่ครบเป็นประจำ';break;
case 3 :$text='ขาดเรียนเป็นประจำ';break;
case 4 :$text='เข้าห้องเรียนช้าเป็นประจำ';break;
case 5 :$text='ติด 0 ร มส. มผ. 1-2 วิชา/ภาคเรียน';break;
case 6 :$text='มาเรียนสาย 1-3 ครั้ง/สัปดาห์';break;
case 7 :$text='ไม่ส่งงานเป็นประจำ';break;
case 8 :$text='สมาธิสั้น';break;
default :
}
?>
<div class="form-check">
<input type="checkbox" name="learningproblem<?php echo $i; ?>" value="Y" class="form-check-input required" style="height:20px; width:20px;" <?php if ($learningproblem_checked[$i]=="Y")echo 'checked'; ?> id="learningproblem<?php echo $i; ?>" required/>
<label class="form-check-label" for="learningproblem<?php echo $i; ?>">
<?php echo $text; ?>
</label>
</div>
<?php }?>
</div>
<script language=Javascript>
function show10(str){
document.getElementById('sh12').style.display = 'none';
document.getElementById('sh11').style.display = 'none';
document.getElementById('sh10').style.display = 'block';
}
function show11(sign){
document.getElementById('sh12').style.display = 'none';
document.getElementById('sh11').style.display = 'block';
document.getElementById('sh10').style.display = 'none';
}
function show12(sign){
document.getElementById('sh12').style.display = 'block';
document.getElementById('sh11').style.display = 'none';
document.getElementById('sh10').style.display = 'none';
}
</script>
<h4>ด้านสุขภาพ*</h4>
<div class="form-check">
<input type="radio" name="health" value="1" class="form-check-input" style="height:20px; width:20px;" required <?php if ($row->health=="1")echo 'checked';else echo 'checked'; ?> onChange="show10(this.value)"/> ปกติ
</div>
<div class="form-check">
<input type="radio" name="health" value="2" class="form-check-input" style="height:20px; width:20px;" required <?php if ($row->health=="2")echo 'checked'; ?> onChange="show11()"/> เสี่ยง
</div>
<div id="sh10"></div>
<div id="sh11" style="display:none;">
<?php
$healthrisky_checked=array();
for($i=0;$i<=2;$i++){
$healthrisky_checked=str_split($row->healthrisky);
switch ($i) {
case 0 :$text='ร่างกายไม่แข็งแรง';break;
case 1 :$text='มีปัญหาทางสายตา (สวมแว่น หรือคอนแท็คเลนส์)';break;
case 2 :$text='มีโรคประจำตัวบ่อยๆ';break;
default :
}
?>
<div class="form-check">
<input type="checkbox" name="healthrisky<?php echo $i; ?>" value="Y" class="form-check-input required" style="height:20px; width:20px;" <?php if ($healthrisky_checked[$i]=="Y")echo 'checked'; ?> required id="healthrisky<?php echo $i; ?>"/>
<label class="form-check-label" for="healthrisky<?php echo $i; ?>">
<?php echo $text; ?>
</label>
</div>
<?php }?>
</div>
<div class="form-check">
<input type="radio" name="health" value="3" class="form-check-input" style="height:20px; width:20px;" required <?php if ($row->health=="3")echo 'checked'; ?> onChange="show12()"/> มีปัญหา
<div class="invalid-feedback">กรุณาเลือกด้านสุขภาพ</div>
</div>
<div id="sh12" style="display:none;">
<?php
$healthproblem_checked=array();
for($i=0;$i<=5;$i++){
$healthproblem_checked=str_split($row->healthproblem);
switch ($i) {
case 0 :$text='มีภาวะทุพโภชนาการ';break;
case 1 :$text='ป่วยเป็นโรคร้ายแรง/เรื้อรัง';break;
case 2 :$text='มีความบกพร่องทางการได้ยิน';break;
case 3 :$text='มีความพิการทางร่างกาย';break;
case 4 :$text='มีปัญหาทางด้านสายตาอย่างร้ายแรง';break;
case 5 :$text='สมรรถภาพร่างกายต่ำ';break;
default :
}
?>
<div class="form-check">
<input type="checkbox" name="healthproblem<?php echo $i; ?>" value="Y" class="form-check-input" style="height:20px; width:20px;" <?php if ($healthproblem_checked[$i]=="Y")echo 'checked'; ?> required id="healthproblem<?php echo $i; ?>"/>
<label class="form-check-label" for="healthproblem<?php echo $i; ?>">
<?php echo $text; ?>
</label>
</div>
<?php }?>
</div>
<div class="form-group row">
<div class="col-sm-3 offset-sm-3 text-right pt-3">
<button type="submit" name="btn_submit" id="btn_submit" value="1" class="btn btn-primary btn-block">ส่งข้อมูล</button>
</div>
</div>
</form>
</div>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
var checkbox_required = false;
$(":checkbox.required").on("click",function(){
var is_checked = $(this).prop("checked");
if(is_checked){
$(":checkbox.required").prop('required',false);
checkbox_required = true;
}else{
if($(":checkbox.required:checked").length==0){
checkbox_required = false;
$(":checkbox.required").prop('required',true);
}
}
});
$("#myform1").on("submit",function(){
var form = $(this)[0];
if (form.checkValidity() === false || checkbox_required===false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
});
});
</script>
Suthon77
12-06-2020
10:42:19
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
ความคิดเห็นที่
1
รูปแบบน่าจะซับซ้อน ต้องสร้างเป็นฟังก์ชั่น มาตรวจสอบว่า ถ้าตัวเลือกไหน มี <div class="form-check">checkbox</div>
ถ้าไม่ได้เลือกเลย ให้เป็น false
เริ่มต้น ให้ตัด requried attrtibute ของ radio และ <div class="form-check">checkbox</div> ออกให้หมด แล้วจัดกลุ่มประมาณนี้
1 2 3 4 5 6 7 8 | <div class="form-group parent-group"> <h4>ด้านการเรียน*</h4></div><div class="form-group parent-group"> <h4>ด้านสุขภาพ*</h4></div> |
ต่อไป radio ในกลุ่มย่อยให้คลุมด้วย parent-check
1 2 3 4 5 6 | <div class="form-check parent-check"> radko 1</div><div class="form-check parent-check"> radko 2</div> |
และ radio ตัวไหน มี <div class="form-check">checkbox</div> คลุม <div class="form-check">checkbox</div> ทั้งหมดด้วย child-check
1 2 3 4 5 6 7 8 9 | <div class="form-check parent-check"> radko 3</div><div></div> div ตัวคั่น เห็นว่ามีใช้<div class="child-check" style="display:none;"> <div class="form-check">checkbox</div> <div class="form-check">checkbox</div> <div class="form-check">checkbox</div></div> |
แล้วใช้คำสั่งประมาณนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script type="text/javascript">$(function(){ function check_required(){ var childNotChecked = 0; $(".parent-group").find(":radio:checked").each(function(k, ele){ var childCheck = $(ele).parent(".parent-check").next().next(".child-check"); if(childCheck.length>0){ if(childCheck.find(":<div class="form-check">checkbox</div>:checked").length==0){ childNotChecked++; } } }); if(childNotChecked>0){ return false; } return true; } $("#myform1").on("submit",function(){ var form = $(this)[0]; console.log(check_required()); console.log(form.checkValidity()); if (form.checkValidity() === false || check_required()===false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); });});</script> |
ninenik
12-06-2020
ความคิดเห็นที่
2
ยังไม่ได้เลยครับ ฮือๆ
<!doctype html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
</head>
<body>
<div class="container">
<br>
<form id="myform1" name="form1" method="post" action="" novalidate>
<div class="form-group row">
<label for="input_name" class="col-sm-3 col-form-label text-right">ชื่อ นามสกุล</label>
<div class="col">
<input type="text" class="form-control" name="input_name" id="input_name"
autocomplete="off" value="" required>
<div class="invalid-feedback">
กรุณากรอกชื่อ นามสกุล
</div>
</div>
</div>
<script language=Javascript>
function show7(str){
document.getElementById('sh9').style.display = 'none';
document.getElementById('sh8').style.display = 'none';
document.getElementById('sh7').style.display = 'block';
}
function show8(sign){
document.getElementById('sh9').style.display = 'none';
document.getElementById('sh8').style.display = 'block';
document.getElementById('sh7').style.display = 'none';
}
function show9(sign){
document.getElementById('sh9').style.display = 'block';
document.getElementById('sh8').style.display = 'none';
document.getElementById('sh7').style.display = 'none';
}
</script>
<h4>ด้านการเรียน*</h4>
<div class="form-group parent-group">
<div class="form-check parent-check">
<input type="radio" name="learning" value="1" class="form-check-input" style="height:20px; width:20px;" <?php if ($row->learning=="1")echo 'checked';else echo 'checked'; ?> onChange="show7(this.value)"/> ปกติ
</div>
<div class="form-check parent-check">
<input type="radio" name="learning" value="2" class="form-check-input" style="height:20px; width:20px;" <?php if ($row->learning=="2")echo 'checked'; ?> onChange="show8()"/> เสี่ยง
</div>
<div id="sh7"></div>
<div id="sh8" style="display:none;">
<?php
$learningrisky_checked=array();
for($i=0;$i<=10;$i++){
$learningrisky_checked=str_split($row->learningrisky);
//print_r($learningrisky_checked);
switch ($i) {
case 0 :$text='ผลการเรียนเฉลี่ย 1.00 – 1.75';break;
case 1 :$text='ไม่เข้าเรียน 1-2 ครั้ง/สัปดาห์';break;
case 2 :$text='ไม่มีอุปกรณ์การเรียนมาเรียนหรือนําอุปกรณ์การเรียนมาไม่ครบในบางครั้ง';break;
case 3 :$text='ขาดเรียนบ่อย';break;
case 4 :$text='เข้าห้องเรียนช้าบ่อย';break;
case 5 :$text='คํานวน บวก ลบ คูณ หาร ไม่คล่อง';break;
case 6 :$text='ติด 0 ร มส. มผ. 1-2 วิชา/ภาคเรียน';break;
case 7 :$text='มาเรียนสาย 1-3 ครั้ง/สัปดาห์';break;
case 8 :$text='ไม่ส่งงานบ่อย';break;
case 9 :$text='อ่านหรือสะกดคําไม่คล่อง';break;
case 10 :$text='ไม่ตั้งใจเรียนขณะครูสอน';break;
default :
}
?>
<div class="form-check child-check">
<input type="checkbox" name="learningrisky<?php echo $i; ?>" value="Y" class="form-check-input required" style="height:20px; width:20px;" <?php if ($learningrisky_checked[$i]=="Y")echo 'checked'; ?> id="learningrisky<?php echo $i; ?>" />
<label class="form-check-label" for="learningrisky<?php echo $i; ?>">
<?php echo $text; ?>
</label><br>
</div>
<?php }?>
</div>
<div class="form-check parent-check">
<input type="radio" name="learning" value="3" class="form-check-input" style="height:20px; width:20px;" <?php if ($row->learning=="3")echo 'checked'; ?> onChange="show9()"/> มีปัญหา
</div>
<div id="sh9" style="display:none;">
<?php
$learningproblem_checked=array();
for($i=0;$i<=8;$i++){
$learningproblem_checked=str_split($row->learningproblem);
switch ($i) {
case 0 :$text='ผลการเรียนต่ำกว่า 1.00';break;
case 1 :$text='ไม่เข้าเรียนมากกว่า 2 ครั้ง/สัปดาห์';break;
case 2 :$text='ไม่มีอุปกรณ์การเรียนมาเรียนหรือนําอุปกรณ์การเรียนมาไม่ครบเป็นประจำ';break;
case 3 :$text='ขาดเรียนเป็นประจำ';break;
case 4 :$text='เข้าห้องเรียนช้าเป็นประจำ';break;
case 5 :$text='ติด 0 ร มส. มผ. 1-2 วิชา/ภาคเรียน';break;
case 6 :$text='มาเรียนสาย 1-3 ครั้ง/สัปดาห์';break;
case 7 :$text='ไม่ส่งงานเป็นประจำ';break;
case 8 :$text='สมาธิสั้น';break;
default :
}
?>
<div class="form-check child-check">
<input type="checkbox" name="learningproblem<?php echo $i; ?>" value="Y" class="form-check-input required" style="height:20px; width:20px;" <?php if ($learningproblem_checked[$i]=="Y")echo 'checked'; ?> id="learningproblem<?php echo $i; ?>"/>
<label class="form-check-label" for="learningproblem<?php echo $i; ?>">
<?php echo $text; ?>
</label><br>
</div>
<?php }?>
</div>
</div>
<script language=Javascript>
function show10(str){
document.getElementById('sh12').style.display = 'none';
document.getElementById('sh11').style.display = 'none';
document.getElementById('sh10').style.display = 'block';
}
function show11(sign){
document.getElementById('sh12').style.display = 'none';
document.getElementById('sh11').style.display = 'block';
document.getElementById('sh10').style.display = 'none';
}
function show12(sign){
document.getElementById('sh12').style.display = 'block';
document.getElementById('sh11').style.display = 'none';
document.getElementById('sh10').style.display = 'none';
}
</script>
<h4>ด้านสุขภาพ*</h4>
<div class="form-group parent-group">
<div class="form-check parent-check">
<input type="radio" name="health" value="1" class="form-check-input" style="height:20px; width:20px;" <?php if ($row->health=="1")echo 'checked';else echo 'checked'; ?> onChange="show10(this.value)"/> ปกติ
</div>
<div class="form-check parent-check">
<input type="radio" name="health" value="2" class="form-check-input" style="height:20px; width:20px;" <?php if ($row->health=="2")echo 'checked'; ?> onChange="show11()"/> เสี่ยง
</div>
<div id="sh10"></div>
<div id="sh11" style="display:none;">
<?php
$healthrisky_checked=array();
for($i=0;$i<=2;$i++){
$healthrisky_checked=str_split($row->healthrisky);
switch ($i) {
case 0 :$text='ร่างกายไม่แข็งแรง';break;
case 1 :$text='มีปัญหาทางสายตา (สวมแว่น หรือคอนแท็คเลนส์)';break;
case 2 :$text='มีโรคประจำตัวบ่อยๆ';break;
default :
}
?>
<div class="form-check child-check">
<input type="checkbox" name="healthrisky<?php echo $i; ?>" value="Y" class="form-check-input required" style="height:20px; width:20px;" <?php if ($healthrisky_checked[$i]=="Y")echo 'checked'; ?> id="healthrisky<?php echo $i; ?>"/>
<label class="form-check-label" for="healthrisky<?php echo $i; ?>">
<?php echo $text; ?>
</label>
</div>
<br>
<?php }?>
</div>
<div class="form-check parent-check">
<input type="radio" name="health" value="3" class="form-check-input" style="height:20px; width:20px;" <?php if ($row->health=="3")echo 'checked'; ?> onChange="show12()"/> มีปัญหา
</div>
<div id="sh12" style="display:none;">
<?php
$healthproblem_checked=array();
for($i=0;$i<=5;$i++){
$healthproblem_checked=str_split($row->healthproblem);
switch ($i) {
case 0 :$text='มีภาวะทุพโภชนาการ';break;
case 1 :$text='ป่วยเป็นโรคร้ายแรง/เรื้อรัง';break;
case 2 :$text='มีความบกพร่องทางการได้ยิน';break;
case 3 :$text='มีความพิการทางร่างกาย';break;
case 4 :$text='มีปัญหาทางด้านสายตาอย่างร้ายแรง';break;
case 5 :$text='สมรรถภาพร่างกายต่ำ';break;
default :
}
?>
<div class="form-check child-check">
<input type="checkbox" name="healthproblem<?php echo $i; ?>" value="Y" class="form-check-input" style="height:20px; width:20px;" <?php if ($healthproblem_checked[$i]=="Y")echo 'checked'; ?> id="healthproblem<?php echo $i; ?>"/>
<label class="form-check-label" for="healthproblem<?php echo $i; ?>">
<?php echo $text; ?>
</label><br>
</div>
<?php }?>
</div>
</div>
<input type="submit" name="reg" id="Submit" value="บันทึก" />
</form>
</div>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
function check_required(){
var childNotChecked = 0;
$(".parent-group").find(":radio:checked").each(function(k, ele){
var childCheck = $(ele).parent(".parent-check").next().next(".child-check");
if(childCheck.length>0){
if(childCheck.find(":checkbox:checked").length==0){
childNotChecked++;
}
}
});
if(childNotChecked>0){
return false;
}
return true;
}
$("#myform1").on("submit",function(){
var form = $(this)[0];
console.log(check_required());
console.log(form.checkValidity());
if (form.checkValidity() === false || check_required()===false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
});
});
</script>
</body>
</html>
suthon77
12-06-2020
16:04
ความคิดเห็นที่
3
เหมือนจะทำได้แล้วครับ เดี๋ยวจะมาอัพเดตอีกที
suthon77
12-06-2020
20:07
ความคิดเห็นที่
4
น้ำตาจะไหลครับ ทำได้แล้ว เย๊ ขอบคุณมากคร๊าบบบบ
suthon77
12-06-2020
20:33
ขอบคุณทุกการสนับสนุน
![]()
สนับสนุนเว็บไซต์เรา จ่ายด้วย 
Author Ninenik Narkdee
2025 © Copyright ninenik.com. All rights reserved.