Blog Blog http://www.bcoos.net/tag/javascript Mon, 17 Dec 2018 10:18:29 +0100 FeedCreator 1.7.2 http://www.bcoos.net/includes/images/logo.png Blog http://www.bcoos.net/tag/javascript Blog Jquery javascript check all checkboxes one-liner http://www.bcoos.net/jquery-javascript-check-all-checkboxes-one-liner <span><span><span><script type="text/javascript"> $(function () { $('.checkAll').click(function () { $(this).parent().find(':checkbox').attr('checked',$(this).attr('checked'));}); });</script><style type="text/css"> ul.list {list-style-type:none;margin-left:0px;}.list li {float:left;width:33%;} .container input {margin-right:4px;} div .title { font-size:16px;font-weight:bold;}</style><div class="container"><input class="checkAll" type="checkbox"><span class="title">Properties</span><ul class="list"><li><input value="1" type="checkbox">Property 1</li><li><input value="2" type="checkbox">Property 2</li><li><input value="3" type="checkbox">Property 3</li> <li><input value="4" type="checkbox">Property 4</li><li><input value="5" type="checkbox">Property 5</li> <li><input value="6" type="checkbox">Property 6</li></ul></div><br style="clear: both;"><br>JQuery Javascript:<span></span><span><span><br><pre class="brush: js">&lt;script type="text/javascript"&gt; $(function () { $('.checkAll').click(function () { $(this).parent().find(':checkbox').attr('checked',$(this).attr('checked'));}); }); &lt;/script&gt;</pre></span><br>HTML:<span></span><span><span><br><pre class="brush: xml">&lt;div class="container"&gt; &lt;input class="checkAll" type="checkbox"&gt;&lt;span class="title"&gt;Properties&lt;/span&gt; &lt;ul class="list"&gt; &lt;li&gt;&lt;input value="1" type="checkbox"&gt;Property 1&lt;/li&gt; &lt;li&gt;&lt;input value="2" type="checkbox"&gt;Property 2&lt;/li&gt; &lt;li&gt;&lt;input value="3" type="checkbox"&gt;Property 3&lt;/li&gt; &lt;li&gt;&lt;input value="4" type="checkbox"&gt;Property 4&lt;/li&gt; &lt;li&gt;&lt;input value="5" type="checkbox"&gt;Property 5&lt;/li&gt; &lt;li&gt;&lt;input value="6" type="checkbox"&gt;Property 6&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;</pre><br></span></span></span>CSS:<span></span><span><br><pre class="brush: css">&lt;style type="text/css"&gt; ul.list { list-style-type:none;margin-left:0px;} ul.list li { float:left;width:33%;} .container input { margin-right:4px;} div .title { font-size:16px;font-weight:bold;} &lt;/style&gt;</pre><br></span><br><br></span></span></span> Sat, 03 Dec 2011 00:58:53 +0100