カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

jQueryでチェックボックスの全選択・全解除を実装する

jQueryでチェックボックスの全選択、及び全解除の仕組みを実装する方法をご紹介します。
jQueryを使いますので、jQueryの読み込みを忘れないようにしてください。

以下のようなHTMLがあったとします。

<input type="checkbox" name="all_check">全選択

<input type="checkbox" name="check[]" value="">a
<input type="checkbox" name="check[]" value="">b
<input type="checkbox" name="check[]" value="">c
<input type="checkbox" name="check[]" value="">d
<input type="checkbox" name="check[]" value="">e
<input type="checkbox" name="check[]" value="">f

まずは全選択のチェックボックスにチェックを入れると全てのチェックボックスにチェックが入るようにしましょう。

$('input[name="all_check"]').on('click',function() {
    $('input[name="check[]"]').prop('checked', this.checked);
});

次に、各チェックボックスのクリックイベントを設定し、チェックの状況によって全選択のチェック状態を変更するように仕組みます。
チェックボックスの数とチェックされたチェックボックスの数を比較して、同じであれば(全てチェックされていれば)全選択にもチェックを入れます。
どれか1つでもチェックが外れれば全選択のチェックは解除します。

$('input[name="check[]"]').on('click',function(){
    if($('input[name="check[]"]:checked').length == $('input[name="check[]"]').length ) {
        $('input[name="all_check"]').prop('checked', true);
    } else {
        $('input[name="all_check"]').prop('checked', false);
    }
});

if文を使わずに1行で書くこともできます。

$('input[name="check[]"]').on('click',function(){
    $('input[name="all_check"]').prop('checked', ($('input[name="check[]"]:checked').length == $('input[name="check[]"]').length));
});
1,499 views

jQueryプラグイン「bxSlider」を使う

スライドショーを実装してくれる「bxSlider」をご紹介します。
これまでにもスライドショーを実装できる色々なプラグインをご紹介しましたが、
最近はこれをよく使います。

bxSlider

まずはjQueryを読み込む。

<script src="./jquery-1.9.1.min.js"></script>

※ちなみに、jQueryが3.1.1だとエラーが発生しました。

続いてbxSliderのファイルを読み込みます。

<link href="./bxslider/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript" src="./bxslider/jquery.bxslider.min.js"></script>

スライドさせたい内容を用意します。

<ul class="bxslider">

    <li>
        <img src="./images/exam_picture1.jpg">
    </li>

    <li>
        <img src="./images/exam_picture2.jpg">
    </li>

    <li>
        <img src="./images/exam_picture3.jpg">
    </li>

</ul>

まずは簡単に実装してみましょう。

<script type="text/javascript">
<!--//
(function($) {
    $(document).ready(function(){

        $('.bxslider').bxSlider({
            auto: true,
            autoHover: true,
        });

    });
})(jQuery);
//-->
</script>

続きを読む…»

4,646 views

jQueryプラグインでスライドショー「Slider Pro」

スライドショーを実装してくれるプラグインです。
IEでも動作し、レスポンシブにも対応しています。

JavaScriptライブラリをダウンロード
jQuery
Slider Pro

まずjQueryは必須です。

<script src="./jquery-1.9.1.min.js"></script>

次にSlider ProのスタイルシートやJSファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/slider-pro.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/examples.css" media="screen">

<script type="text/javascript" src="./slider-pro-master/dist/js/jquery.sliderPro.min.js"></script>

HTMLを記述します。

<div id="mySlider" class="mySlider slider-pro">

    <div class="sp-slides">

        <div class="sp-slide">

            <img class="sp-image" src="./slider-pro-master/src/css/images/blank.gif" data-src="[画像パス]" data-small="[サムネイル画像パス]">

            <p class="sp-layer sp-white sp-padding" data-horizontal="0" data-vertical="0" data-show-transition="left" data-show-delay="400">
                表示したいキャプション
            </p>

        </div>

    </div>

    <div class="sp-thumbnails">
        <img class="sp-thumbnail" src="[サムネイル画像パス]">
    </div>

</div>

キャプション部分のクラスとパラメーター

クラス
sp-layer キャプションを表示
sp-white 白背景に黒文字
sp-padding 10pxのパディングを設定
パラメーター
data-horizontal 水平固定位置を指定。数値、もしくはパーセンテージ。
data-vertical 垂直固定位置を指定。数値、もしくはパーセンテージ。
data-show-transition スライドの方向。(left, right, up, down)
data-show-delay 自動再生のスライド切り替え時間。単位:10ミリ秒

続きを読む…»

8,365 views

jQuery スライドショー slick.js

レスポンシブに対応した多機能プラグイン「slick.js」のご紹介です。

slick.js

http://kenwheeler.github.io/slick/

個人的には、思ったようにしようとすると少しコツがいるな、という感じでした。

まずはjQueryとslick.js本体を読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="slick-1.5.7/slick/slick.min.js"></script>

次にCSSを読み込み

<link rel="stylesheet" type="text/css" href="slick-1.5.7/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-1.5.7/slick/slick-theme.css"/>

スライドさせたい画像等のコンテンツをbodyタグ内に記述します。

<ul class="your-class">
    <li>
        コンテンツ1
    </li>
    <li>
        コンテンツ2
    </li>
</ul>

続きを読む…»

24,683 views

ページのトップへスクロールする

現在のページのトップへスクロールする小技です。
jQueryを使って実装します。

JavaScriptライブラリをダウンロード
jQuery

まずheadタグ内でjQueryライブラリを読み込みます。

<script type="text/javascript" src="./lib/jquery-1.7.2.min.js"></script>

bodyタグにIDを付けます

<body id="top">

ID付のdivタグで括ってリンクを作成します。

<div id="to_pagetop">
    <a href="#top">上に戻る</a>
</div>

最後に任意の場所に以下のコードを記述します。 続きを読む…»

1,323 views