ページ内に、いくつかのチェックボックスがあって、それをまとめてチェックさせたり、外したりする機能を実装します。
HTMLコーディングは以下のようなものです。

<p><a  class="setbtn chkon" href="#">全部を選択する</a><br />
<a  class="setbtn chkoff" href="#">全部の選択を解除する</a></p>

<table  border="1">
<tbody><tr>
<td><span><input  value="2015-05-01-1" name="set1_1" class="set1" type="checkbox">1日 午前</span></td>
<td><span><input  value="2015-05-01-2" name="set2_1" class="set2" type="checkbox">1日 午後</span></td>
<td><span><input  value="2015-05-01-3" name="set3_1" class="set3" type="checkbox">1日 深夜</span></td>
</tr>
<tr>
<td><span><input  value="2015-05-02-1" name="set1_2" class="set1" type="checkbox">2日 午前</span></td>
<td><span><input  value="2015-05-02-2" name="set2_2" class="set2" type="checkbox">2日 午後</span></td>
<td><span><input  value="2015-05-02-3" name="set3_2" class="set3" type="checkbox">2日 深夜</span></td>
</tr>
<tr>
<td><span><input  value="2015-05-03-1" name="set1_3" class="set1" type="checkbox">3日 午前</span></td>
<td><span><input  value="2015-05-03-2" name="set2_3" class="set2" type="checkbox">3日 午後</span></td>
<td><span><input  value="2015-05-03-3" name="set3_3" class="set3" type="checkbox">3日 深夜</span></td>
</tr>
<tr>
<td><span><input  value="2015-05-04-1" name="set1_4" class="set1" type="checkbox">4日 午前</span></td>
<td><span><input  value="2015-05-04-2" name="set2_4" class="set2" type="checkbox">4日 午後</span></td>
<td><span><input  value="2015-05-04-3" name="set3_4" class="set3" type="checkbox">4日 深夜</span></td>
</tr>
</tbody></table>
  

実際表示すると以下のような感じの表示にします。

59)


そもそも こんな表示のページを作ることあるかよ! とか、checkboxにまとめてチェックいれることあるかよ! って言われそうですが(汗

ま、jQueryで簡単にできるのでやってみよう、という感じです。

チェックボックスの<input>の属性はcheckboxなので、それがわかれば、$(セレクタ).each()を使ってまとめて処理します。

jQueryの$(セレクタ).each()は、条件に一致したすべてに、命令を実行します。

ということで、先のHTMLソースコードのページに表示された「すべてのチェックボックスに一気にチェックをいれる」場合、jQueryは以下の処理になります。

$('.chkon').click(function(e){
e.preventDefault();
$("input[type=checkbox]").each(function(index){
var setval = $(this).val();
$(this).val([setval]);
});
});
    


ちなみに、チェックを一気にはずす場合のjQueryは以下

$('.chkoff').click(function(e){
e.preventDefault();
$("input[type=checkbox]").each(function(index){
$(this).val([]);
});
});

以上、2つのjQueryのコーディングを組み込んだのが下記のページです。参考にご確認ください。

完成したサンプルページの動作を見る


ちなみに<input>がチェックボックス、ラジオボタンのときに、属性checkedをjQueryで設定する方法には次の書き方があります。


○チェックをいれるとき

$(セレクタ).attr("checked", true )
$(セレクタ).val([value属性の値])

○チェックを外すとき

$(セレクタ).attr("checked", false)
$(セレクタ).val([])

※なお、ラジオボタンの場合、nameの設定次第では、全選択にならないこともあるので注意。

今回は、今回、checkedを入れるのに、$(セレクタ).val([value属性の値]) を使いました。

全部、チェック入れるのは、こんな感じでお気楽にできるんでいいんですが、表の中の1列だけとか、1行だけにチェックをいれる、はずしたりする場合はちょっと面倒なスクリプトを書くことになります。

やり方としては、checkboxにclass属性を設定していけばいいだけなんですが。

 

ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ