انتخاب همه گزینه ها (checkbox) یا عدم انتخاب همه گزینه ها یا معکوس کردن وضعیت انتخاب گزینه های یک فرم (با javascript)
به فرم زیر که از تعدادی checkbox تشکیل شده است توجه نمایید. یک دکمه برای انتخاب همه checkbox ها وجود دارد و یک دکمه نیز برای عدم انتخاب همه checkbox ها قرار داده شده است. علاوه بر این، یک دکمه نیز وجود دارد که اگر بر روی آن کلیک کنیم، گزینه های انتخاب شده را پاک کرده و گزینه هایی که انتخاب نشده اند را انتخاب می کند (معکوس کردن وضعیت فعلی) :
کدها :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript">
function checkAll() {
for (var j = 1; j <= 14; j++) {
box = eval("document.checkboxform.C" + j);
if (box.checked == false) box.checked = true;
}
}
function uncheckAll() {
for (var j = 1; j <= 14; j++) {
box = eval("document.checkboxform.C" + j);
if (box.checked == true) box.checked = false;
}
}
function switchAll() {
for (var j = 1; j <= 14; j++) {
box = eval("document.checkboxform.C" + j);
box.checked = !box.checked;
}
}
</script>
</head>
<body>
<center>
<form name=checkboxform>
<input type="checkbox" name="C1" checked>C1<br>
<input type="checkbox" name="C2" checked>C2<br>
<input type="checkbox" name="C3" checked>C3<br>
<input type="checkbox" name="C4" checked>C4<br>
<input type="checkbox" name="C5" checked>C5<br>
<input type="checkbox" name="C6" checked>C6<br>
<input type="checkbox" name="C7" checked>C7<br>
<input type="checkbox" name="C8" checked>C8<br>
<input type="checkbox" name="C9" checked>C9<br>
<input type="checkbox" name="C10" checked>C10<br>
<input type="checkbox" name="C11" checked>C11<br>
<input type="checkbox" name="C12" checked>C12<br>
<input type="checkbox" name="C13" checked>C13<br>
<input type="checkbox" name="C14" checked>C14<br>
<br>
<input type="button" value="Check All" onClick="checkAll()"><br>
<input type="button" value="Uncheck All" onClick="uncheckAll()"><br>
<input type="button" value="Switch All" onClick="switchAll()"><br>
</form>
</center>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript">
function checkAll() {
for (var j = 1; j <= 14; j++) {
box = eval("document.checkboxform.C" + j);
if (box.checked == false) box.checked = true;
}
}
function uncheckAll() {
for (var j = 1; j <= 14; j++) {
box = eval("document.checkboxform.C" + j);
if (box.checked == true) box.checked = false;
}
}
function switchAll() {
for (var j = 1; j <= 14; j++) {
box = eval("document.checkboxform.C" + j);
box.checked = !box.checked;
}
}
</script>
</head>
<body>
<center>
<form name=checkboxform>
<input type="checkbox" name="C1" checked>C1<br>
<input type="checkbox" name="C2" checked>C2<br>
<input type="checkbox" name="C3" checked>C3<br>
<input type="checkbox" name="C4" checked>C4<br>
<input type="checkbox" name="C5" checked>C5<br>
<input type="checkbox" name="C6" checked>C6<br>
<input type="checkbox" name="C7" checked>C7<br>
<input type="checkbox" name="C8" checked>C8<br>
<input type="checkbox" name="C9" checked>C9<br>
<input type="checkbox" name="C10" checked>C10<br>
<input type="checkbox" name="C11" checked>C11<br>
<input type="checkbox" name="C12" checked>C12<br>
<input type="checkbox" name="C13" checked>C13<br>
<input type="checkbox" name="C14" checked>C14<br>
<br>
<input type="button" value="Check All" onClick="checkAll()"><br>
<input type="button" value="Uncheck All" onClick="uncheckAll()"><br>
<input type="button" value="Switch All" onClick="switchAll()"><br>
</form>
</center>
</body>
</html>
دسته بندی
کدهای آماده برای فرم ها
نویسنده
علیرضا گلمکانی
شماره کلید
669
گزینه ها
نظرات 0 0 0