জেকেয়েরি এক চেকবক্স ক্লিক করে সব সিলেক্ট করা (jQuery select all)
অনেক
সময় আপনার এপ্লিকেশনে কোন তালিকা থাকতে পারে এবং একসাথে তালিকাভুক্ত সব
আইটেম সিলেক্ট করার অপশন দিতে চান তাহলে জেকোয়েরিতে এর ছোট্র এবং সহজ
সমাধান আছে।
index.html ফাইল
style.css ফাইল
script.js ফাইল
আউটপুট:
index.html ফাইল
01.<!DOCTYPE html>02.<html>03.<head>04.<title>Webcoachbd Onclick select All tutorials</title>05.<link rel="stylesheet" href="/style.css"06.type="text/css" />07.<script src="/jquery_latest.js" type="text/javascript"></script>08.<script src="/script.js" type="text/javascript"></script>09.</head>10. 11.<body>12.<div id="content_pane">13.<form action="" method="post">14.<input id="checkAll" type="checkbox" name="selectAll"/>Select All15.<p><input class="purchase" type="checkbox" name="product1"/>HTML</p>16.<p><input class="purchase" type="checkbox" name="product2"/>CSS</p>17.<p><input class="purchase" type="checkbox" name="product3"/>PHP</p>18.<p><input class="purchase" type="checkbox" name="product4"/>jQuery</p>19.<input class="purchase" type="submit" name="submit"/>20.</form>21.</div>22.</body>23.</html>01.body{02.font-family:Verdana;03.font-size:13px;04.}05.#content_pane{06.width:400px;07.margin:0 auto;08.overflow:hidden;09.border:1px solid #ccc;10.border-radius:5px;11.padding:10px;12.}script.js ফাইল
01.$(document).ready(function(){02.$('#checkAll').click(function(){03.var c = this.checked;04.$('input[type="checkbox"]').each(function(){05.$(this).prop('checked',c);06.});07.}08.);09.});এখানে ৩ নম্বর লাইনটি হচ্ছে আসল ট্রিকস।c ভেরিয়েবলে "checkAll" আইডি সম্বলিত চেকবক্স চেক করে দেখা হচ্ছে যে এটা টিক মার্ক (চেক) দেয়া আছে কিনা।দেয়া থাকলে true রিটার্ন করবে আর না থাকলে false রিটার্ন করবে।এরপর prop মেথডে checked এট্রিবিউট প্রথম প্যারামিটার এবং দ্বিতীয় প্যারামিটার c ভেরিয়েবল।সুতরাং checkAll বাটন ক্লিক করলে prop মেথডে একবার true এবং আরেকবার false এভাবে পরিবর্তন হবে।true হলে সব সিলেক্ট হবে আর false হলে সিলেকশন উঠে যাবে।
0 মন্তব্য(গুলি):
Post a Comment