Ernest Talks: jquery

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 />

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

延續多年前的一篇本站熱門文章「 jQuery: 判斷 checkbox 是否被選取」，近期突然被問到三次關於，如果是一群 checkbox group 需要判斷是否至少有勾選一個，該怎麼判斷。想說教了三次，還是認真一點直接分享在可以被搜尋引擎找到的地方分享囉 :) ...

讓 jQuery UI Datepicker 取消週末或週日不能選取

<a href="http://jqueryui.com/demos/datepicker/">jQuery UI Datepicker</a> 提供了我們很方便的日期選取工具，有些系統會希望取消週末的日期格子使之不能選取，例如某些組織/單位提供的預約系統，在週末或週日沒有提供服務，在此我們可以使用 <a href="http://jqueryui.com/demos/datepicker/#event-beforeShowDay">beforeShowDay</a> 這個預設的 event 來做取消週末或週日的日期格子的動作。<br />
<br />
範例：如果想要取消所有週末的日期格子使之不能選取，可以使用 Datepicker 內建的 noWeekends 函式。<br />
<br />
<pre class="brush: javascript">$(document).ready(function() {
  $(function() {
    $('#datepicker_reserve').datepicker({
      beforeShowDay: noWeekends
    });
  });
});
</pre><br />
範例：如果想要取消所有週日的日期格子使之不能選取，我們可以將 Datepicker 內建的 noWeekends 函式稍做修改即可。<br />
<br />
<pre class="brush: javascript">$(document).ready(function() {
  $(function() {
    $('#datepicker_reserve').datepicker({
      beforeShowDay: noSundays
    });
  });
});
function noSundays(a) {
  a=a.getDay();
  return[a>0&&a<7,""];
}
</pre>
其他參考資訊：
<ul><li>getDay(): 0= 週日; 6= 週六</li>
<li><a href="http://stackoverflow.com/questions/501943/can-the-jquery-ui-datepicker-be-made-to-disable-saturdays-and-sundays-and-holida">Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?</a> (stackoverflow)</li>
</ul>

讓 jQuery UI Datepicker 取消週末或週日不能選取

jQuery UI Datepicker 提供了我們很方便的日期選取工具，有些系統會希望取消週末的日期格子使之不能選取，例如某些組織/單位提供的預約系統，在週末或週日沒有提供服務，在此我們可以使用 beforeShowDay 這個預設的 event 來做取消週末或週日的日期格...

jquery image width() or height() can't get real number.

the possible reason may be the images are still not yet load in, therefore jQuery get empty (0) number of the images' width or height. r...

jQuery: 判斷 checkbox 是否被選取

今天晚上很白癡，一直鬼打牆。<br />
<br />
提醒自己，以後直接用這個在 javaScript 中判斷 checkbox 被核取與否：<br />
<br />
<blockquote>
<br />
<span style="color: red;">$("#your-checkbox-id").attr('checked')</span></blockquote>
<br />
<br />
例如：<br />
<br />
<blockquote>
<br />
if ( <span style="color: red;">$("#your-checkbox-id").attr('checked')</span> ) {<br />
something();<br />
}</blockquote>
<br />
延伸閱讀：「<i><b><a href="http://talk.ernestchiang.com/2013/06/jquery-checkbox-group-required-at-least-one.html" target="_blank">jQuery: 判斷 checkbox 群組是否至少有一個被選取(必填) </a></b></i>」<br />
<blockquote>
[Ad] 便宜的 .com 國際網址，一年只要<a href="http://bit.ly/nrk4Me">美金 7.49 元</a>！（台幣兩百多）</blockquote>
<br />
<br />
<br />
<div style="text-align: right;">
<span class="Apple-style-span" style="color: #999999; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><b>Brought to you by</b></span></div>
<div class="separator" style="clear: both; text-align: right;">
<a href="http://bit.ly/ernesttalk-hostgator3"><img border="0" src="http://tracking.hostgator.com/img/Discount_Shared/Hostgator-new-_AN--234x60.gif" /></a></div>
<div style="text-align: right;">
<br /></div>

jQuery: 判斷 checkbox 是否被選取

今天晚上很白癡，一直鬼打牆。提醒自己，以後直接用這個在 javaScript 中判斷 checkbox 被核取與否： $("#your-checkbox-id").attr('checked') 例如： if ( $...