checkbox های کنترل شده در فرم (با javascript)

گاهی نیاز داریم که checkbox های یک فرم، بر اساس انتخاب های کاربر، به صورت انتخاب یا عدم انتخاب، درآیند. مثلا فرم زیر را مشاهده کنید، اگر ابتدا گزینه All را انتخاب کرده و سپس یک گزینه دیگر را انتخاب کنید، گزینه All ، خود به خود، به حالت عدم انتخاب، تغییر پیدا می کند. یا اگر قبلا گزینه ای غیر از All را انتخاب کرده باشید و سپس گزینه All را انتخاب کنید، آن گزینه قبلی، به حالت عدم انتخاب، تغییر پیدا می کند. به غیر از گزینه All ، از میان سایر گزینه ها، می توان دو یا چند گزینه را انتخاب نمود. بنابراین یک فرم حاوی تعدادی checkbox داریم که به خوبی می تواند انتخاب های کاربر را دسته بندی کرده و بر اساس آن عمل نماید :


Result

کدها :


<!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 checkChoice(field, i) {
if (i == 0) { // "All" checkbox selected.
if (field[0].checked == true) {
for (i = 1; i < field.length; i++)
field[i].checked = false;
  }
}
else  {  // A checkbox other than "Any" selected.
if (field[i].checked == true) {
field[0].checked = false;
     }
  }
}
</script>

</head>

<body>

<center>
Please select your favorite class(es):
<form name="pickform">
<table>
<tr><td>
<input type="checkbox" name="classes" value="*" onclick="checkChoice(document.pickform.classes, 0)" checked>All
<br>
<input type="checkbox" name="classes" value="science" onclick="checkChoice(document.pickform.classes, 1)">Science
<br>
<input type="checkbox" name="classes" value="math" onclick="checkChoice(document.pickform.classes, 2)">Math
<br>
<input type="checkbox" name="classes" value="english" onclick="checkChoice(document.pickform.classes, 3)">English
<br>
<input type="checkbox" name="classes" value="history" onclick="checkChoice(document.pickform.classes, 4)">Histroy
<br>
<input type="checkbox" name="classes" value="other" onclick="checkChoice(document.pickform.classes, 5)">Other
</td></tr>
</table>
</form>
</center>

</body>
</html>
نویسنده علیرضا گلمکانی
شماره کلید 672
گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 2 2 0
..
۱۳۹۹/۰۸/۱۷
۱۷:۲۳

سلام خسته نباشید از اینهمه مطالب خوبی که در اختیارمون گذاشتید
میشه بگید چندسال هستش که کار میکنید که انقدر وارد هستید

admin
۱۳۹۹/۰۸/۱۷
۲۲:۴۷

سلام.
معمولا افراد مختلف یک زبان برنامه نویسی را در یک دوره شامل اصول اولیه که می تواند از 1 هفته تا چند هفته طول بکشد، فرا می گیرند و بعد شروع به کدنویسی اهداف و پروژه های مختلف می کنند و در طول اجرای این پروژه ها، به موارد جدیدی که نیاز به یادگیری دارند برخورد می کنند و به سراغ یادگیری آنها می روند. بنابراین اینکه فردی به شما بگوید که مثلا چند سال است که کار می کند و شما فکر کنید که به همان میزان از زمان نیاز دارید تا بتوانید فعالیت های وی را اجرا نمایید، اشتباه است. زیرا ممکن است وی 95 درصد زمان خود را در حال اجرای پروژه ها (اجرای آنچه یاد گرفته) و تنها 5 درصد از زمان خود را در حال یادگیری بوده است (البته یادگیری به همراه تمرین عملی کدنویسی).
بنده از زمان تاسیس وب سایت کلیدستان که تا به امروز بیش از 8 سال می شود، تعدادی زبان برنامه نویسی را تمرین کرده ام، اما مطابق همان مقدمه ای که شرح دادم، یعنی زمان زیادی را صرفا در حال کدنویسی پروژه هایی برای توسعه خود کلیدستان بوده ام و بنابراین تنها درصد اندکی از این زمان صرف یادگیری شده است و مسلما شما اگر پشتکار داشته باشید، در زبان برنامه نویسی مورد نظر خود می توانید طی چند هفته در اصول اولیه به مهارت بالا رسیده و سپس در کدنویسی پروژه های خود، به هر مشکل یا نیازی که برخورد کنید، می توانید به دنبال یادگیری مواردی که مشکل یا نیاز شما را برطرف می کنند، بروید.
هر زبان برنامه نویسی، بسیار گسترده است و بنده صرفا به دنبال یادگیری اصول هر زبان برنامه نویسی و آنچه از آن زبان نیاز داشته ام رفته ام.
موفق باشید.

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)