jQuery select all | SP Foundationbd

অনেক সময় আপনার এপ্লিকেশনে কোন তালিকা থাকতে পারে এবং একসাথে তালিকাভুক্ত সব Item select করার option দিতে চান তাহলে জেকোয়েরিতে এর ছোট্র এবং সহজ সমাধান আছে।

index.html ফাইল

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title> spfoundationbd 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 All

15.<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>

style.css ফাইল

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" ID সম্বলিত checkbox check করে দেখা হচ্ছে যে এটা টিক mark (চেক) দেয়া আছে কিনা।দেয়া থাকলে true return করবে আর না থাকলে false return করবে।এরপর prop মেথডে checked এট্রিবিউট প্রথম প্যারামিটার এবং দ্বিতীয় প্যারামিটার c variable ।সুতরাং checkAll বাটন ক্লিক করলে prop মেথডে একবার true এবং আরেকবার false এভাবে পরিবর্তন হবে।true হলে সব সিলেক্ট হবে আর false হলে selection উঠে যাবে।