คำตอบที่ได้รับเลือกจากเจ้าของกระทู้
ความคิดเห็นที่ 1
จะทำอะไรกับ Checkbox ครับ
ห้ามเลือกเกิน 2 Checkbox ?
และทำไมต้อง addListener ใน JavaScript
แบบไม่ใข้ addEventListener
<html>
<body>
<input type=checkbox value=1 onClick="chkLimit(this);"> 1.<br>
<input type=checkbox value=2 onClick="chkLimit(this);"> 2.<br>
<input type=checkbox value=3 onClick="chkLimit(this);"> 3.<br>
<input type=checkbox value=4 onClick="chkLimit(this);"> 4.<br>
<input type=checkbox value=5 onClick="chkLimit(this);"> 5.<br>
<script language="JavaScript">
var maxchk=2;
var sumchk=0;
function chkLimit(c)
{
if(c.checked==true)
{
if(sumchk<maxchk)
{
sumchk=sumchk+1;
}
else
{
alert("Limit");
c.checked=false;
}
}
else
{
if(sumchk>0)
{
sumchk=sumchk-1;
}
}
}
</script>
</body>
</html>
=====
แบบใข้ addEventListener
<html>
<body>
<input type=checkbox value=1 class=chkbox01> 1.<br>
<input type=checkbox value=2 class=chkbox01> 2.<br>
<input type=checkbox value=3 class=chkbox01> 3.<br>
<input type=checkbox value=4 class=chkbox01> 4.<br>
<input type=checkbox value=5 class=chkbox01> 5.<br>
<script language="JavaScript">
var maxchk=2;
var sumchk=0;
var chkbox1=document.getElementsByClassName("chkbox01");
for(i=0;i<chkbox1.length;i++)
{
chkbox1[i].addEventListener("click",function(){ chkLimit(this); });
}
function chkLimit(c)
{
if(c.checked==true)
{
if(sumchk<maxchk)
{
sumchk=sumchk+1;
}
else
{
alert("Limit");
c.checked=false;
}
}
else
{
if(sumchk>0)
{
sumchk=sumchk-1;
}
}
}
</script>
</body>
</html>
ดูเพิ่มเติม
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
ห้ามเลือกเกิน 2 Checkbox ?
และทำไมต้อง addListener ใน JavaScript
แบบไม่ใข้ addEventListener
<html>
<body>
<input type=checkbox value=1 onClick="chkLimit(this);"> 1.<br>
<input type=checkbox value=2 onClick="chkLimit(this);"> 2.<br>
<input type=checkbox value=3 onClick="chkLimit(this);"> 3.<br>
<input type=checkbox value=4 onClick="chkLimit(this);"> 4.<br>
<input type=checkbox value=5 onClick="chkLimit(this);"> 5.<br>
<script language="JavaScript">
var maxchk=2;
var sumchk=0;
function chkLimit(c)
{
if(c.checked==true)
{
if(sumchk<maxchk)
{
sumchk=sumchk+1;
}
else
{
alert("Limit");
c.checked=false;
}
}
else
{
if(sumchk>0)
{
sumchk=sumchk-1;
}
}
}
</script>
</body>
</html>
=====
แบบใข้ addEventListener
<html>
<body>
<input type=checkbox value=1 class=chkbox01> 1.<br>
<input type=checkbox value=2 class=chkbox01> 2.<br>
<input type=checkbox value=3 class=chkbox01> 3.<br>
<input type=checkbox value=4 class=chkbox01> 4.<br>
<input type=checkbox value=5 class=chkbox01> 5.<br>
<script language="JavaScript">
var maxchk=2;
var sumchk=0;
var chkbox1=document.getElementsByClassName("chkbox01");
for(i=0;i<chkbox1.length;i++)
{
chkbox1[i].addEventListener("click",function(){ chkLimit(this); });
}
function chkLimit(c)
{
if(c.checked==true)
{
if(sumchk<maxchk)
{
sumchk=sumchk+1;
}
else
{
alert("Limit");
c.checked=false;
}
}
else
{
if(sumchk>0)
{
sumchk=sumchk-1;
}
}
}
</script>
</body>
</html>
ดูเพิ่มเติม
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
แสดงความคิดเห็น
ขอถามเรื่อง Code Javascript
ใช้ .addventListener("click", ... );
แทน onclick แต่ว่า ตัวโค้ดไม่ทำงาน
อยากขอคำแนะนำหรือความช่วยเหลือหน่อยค่ะ
ขอบคุณล่วงหน้ามากๆนะคะ
// Definiere Funktion Limit
function Limit() {
// Hole alle Elemente mit der class "count"
let limit = document.getElementsByClassName("count");
// gehe alle Elemente in limit durch
for (let numLimit of limit){
// finde raus, ob mehr als 6 Felder angeklickt sind. Falls ja: Mach ein alert("Darfst du nicht")
for(let i = 0; i < numLimit; i++){
numLimit = numLimit;
if(numLimit == 2){
if (numLimit.checked){
returen true;
}
}
}
<form class="lO">
<div class="numLO">
<div class="numberV">
<label>
<span class="numberNum" id="lo6" value="1" >1</span>
<input type="checkbox" class="count" name="checkv" >
</label>
</div>
<label>
<div class="numberV">
<span class="numberNum" id="lo6" value="2" >2</span>
<input type="checkbox" class="count" name="checkv">
</div>
</label>
<label>
<div class="numberV">
<span class="numberNum" id="lo6" value="3" >3</span>
<input type="checkbox" class="count" name="checkv">
</div>
</label>
</div>
<from>