การเลือก checkbox อย่างน้อย 1 รายการ ในหัวข้อใหญ่แบบหลายข้อ
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา การเลือก checkbox อย่างน้อย 1 รายการ ในหัวข้อใหญ่แบบหลายข้อ
การเลือก checkbox อย่างน้อย 1 รายการ ในหัวข้อใหญ่แบบหลายข้อ
Copy
จากโค้ดนี้ ถ้ามีข้อใหญ่แค่ ข้อเดียว มันเช็คได้ว่าให้เลือก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
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ