در این آموزش, به شما نحوه ساخت باکس کشویی که دارای چک باکس هستند را نشان میدهیم.. در این فیلد های UI سفارشی, قابلیت چند-انتخابی (multi-select) نیز قابل دسترس است. این قابلیت را با استفاده از چند خط کد با توابع jQuery مثل toggle(), show(), hide() پیاده سازی می کنیم. (افکت پنهان و نمایان کردن عناصر در جی کوئری)
در این مثال, از jQuery برای ساخت لیست کشویی استفاده کردیم. هر option شامل یک چک باکس و کپشن است. با کلیک بر روی چک باکس یا کپشن, آیتم مورد نظر انتخاب می شود. آیتم های انتخاب شده هنگام سابمیت فرم به کاربر نمایش داده می شود.
ساخت لیست آبشاری سفارشی با HTML
در این مثال, از option های استاتیک برای ساخت لیست آبشاری استفاده کردیم. شما می توانید این آپشن ها را از دیتابیس و یا هر منبع داینامیک دیگری خوانده و نمایش بدید. بطور پیش فرض لیست آیتم ها مخفی است و با کلیک روی هدر اصلی آپشن لیست نمایش داده می شود.
|
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<div id="checkbox-dropdown-container"> <form id="fromCustomSelect" name="fromCustomSelect" action="" method="post"> <div> <?php if(!empty($_POST["toys"])) { $selectedValues = implode(", ", $_POST["toys"]); ?> <div class="result-list"> <div class="result-list-heading">The selected options are:</div> <div> <?php echo $selectedValues; ?> </div> </div> <?php } ?> <div class="custom-select" id="custom-select">Select Multi Options...</div> <div id="custom-select-option-box"> <div class="custom-select-option"> <input onchange="toggleFillColor(this);" class="custom-select-option-checkbox" type="checkbox" name="toys[]" value="Fidget Spinner"> Fidget Spinner </div> <div class="custom-select-option"> <input onchange="toggleFillColor(this);" class="custom-select-option-checkbox" type="checkbox" name="toys[]" value="Lego Bricks"> Lego Bricks </div> <div class="custom-select-option"> <input onchange="toggleFillColor(this);" class="custom-select-option-checkbox" type="checkbox" name="toys[]" value="YoYo"> YoYo </div> <div class="custom-select-option"> <input onchange="toggleFillColor(this);" class="custom-select-option-checkbox" type="checkbox" name="toys[]" value="Barbie Doll"> Barbie Doll </div> </div> </div> <button type="submit" class="search btn">Submit</button> </form> </div> |
کد ساخت لیست آبشاری به همراه چک باکس با jQuery
در این اسکریپت jQuery , توابعی را برای مدیریت رویداد toggle لیست آبشاری و انتخاب آنها را داریم. برای شبیه سازی لیست آبشاری پیش فرض HTML , توابع jQuery برای فعال کردن چک باکس ها به منظور انتخاب آنها با کلیک روی کپشن را اضافه کردیم.
|
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 30 31 32 33 34 35 |
<script src="jquery-3.2.1.min.js"></script> <script> $("#custom-select").on("click", function() { $("#custom-select-option-box").toggle(); }); function toggleFillColor(obj) { $("#custom-select-option-box").show(); if ($(obj).prop('checked') == true) { $(obj).parent().css("background", '#c6e7ed'); } else { $(obj).parent().css("background", '#FFF'); } } $(".custom-select-option").on("click", function(e) { var checkboxObj = $(this).children("input"); if ($(e.target).attr("class") != "custom-select-option-checkbox") { if ($(checkboxObj).prop('checked') == true) { $(checkboxObj).prop('checked', false) } else { $(checkboxObj).prop("checked", true); } } toggleFillColor(checkboxObj); }); $("body") .on( "click", function(e) { if (e.target.id != "custom-select" && $(e.target).attr("class") != "custom-select-option") { $("#custom-select-option-box").hide(); } }); </script> |
خروجی : ساخت لیست آبشاری به همراه چک باکس با jQuery
امیدوارم از آموزش ساخت لیست آبشاری به همراه چک باکس با jQuery نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
