Ernest Talks

jQuery: 判斷 checkbox 群組是否至少有一個被選取(必填)

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAFJut8R5Kd1lWI-kUOF60i82F9zzwEJSYdOaRpDhOOJcsLR6v_7NS991I0FcqyIIAio28kJRHsOn-n1ztVFGRJEhOA7VXs8ptRjMQ4prGUGRTZs8RnosjTxxoO8F-TQXI77VDMoBslC4/s1600/large_jquery_logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAFJut8R5Kd1lWI-kUOF60i82F9zzwEJSYdOaRpDhOOJcsLR6v_7NS991I0FcqyIIAio28kJRHsOn-n1ztVFGRJEhOA7VXs8ptRjMQ4prGUGRTZs8RnosjTxxoO8F-TQXI77VDMoBslC4/s320/large_jquery_logo.png" width="320" /></a></div>
<br />
<br />
延續多年前的一篇本站熱門文章「<a href="http://talk.ernestchiang.com/2008/10/jquery-checkbox.html" target="_blank">jQuery: 判斷 checkbox 是否被選取</a>」，近期突然被問到三次關於，如果是一群 checkbox group 需要判斷是否至少有勾選一個，該怎麼判斷。想說教了三次，還是認真一點直接分享在可以被搜尋引擎找到的地方分享囉 :)<br />
<br />
從邏輯來判斷，既然工程師已經選擇了使用 jQuery 為基礎，且通常 HTML 與後端程式語言的 <form> 資料傳遞不會是問題，接下來的問題通常卡在大家都比較少閱讀的「<a href="http://api.jquery.com/category/selectors/" target="_blank">jQuery selector</a>」。<br />
<br />
首先我們準備一群 checkbox 的 HTML。在這邊用 PHP 做搭配範例，幫我們產生一群 name 都是 something[] 的 checkbox group，使用其他語言也不是問題。<br />
<br />
<pre class="brush: php"><?php foreach ($SOME_LIST as $list_item_name) { ?>
  <input name="something[]" type="checkbox" value="<?php echo $list_item_name ?>" />
<?php } ?>
</pre>
<br />
接著練習 jQuery 的基本用法：「選取某個東西」然後「對被選到的某個東西做某個動作」。所以我們有多種「選取」的方法，在此是其中一種選法「<b>[name='']</b>」以及「<b>:checked</b>」。然後我們選擇做這個動作「<b>.length</b>」：<br />
<br />
<pre class="brush: javascript"><script>
alert ( $("input[name='something[]']:checked").length );
</script></pre>
<br />
剩下的工作就是將這個數字來做排列組合或是丟去做判斷條件囉，例如：<br />
<br />
<pre class="brush: javascript"><script>
if ( $("input[name='something[]']:checked").length == 0 ) {
  // do something
}
</script></pre>
<br />
<br />
希望這個分享對各位手邊的工作有些許幫助 :) 要學的東西真的很多，一起加油！希望有時間整理一些使用 stackoverflow 的技巧。<br />
<br />
<br />