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));
});

JavaScriptで指定した要素が配列に存在するか調べる方法はいくつかあります。
そのうちの一部を紹介します。

indexOf

引数に指定した値が配列の何番目にあるかをインデックスで返します。

const array = [1, 2, 3];
console.log( array.indexOf(2) );

出力結果

1

結果はインデックスなので、2番目なら1になります。

find (ES2015[ES6])

指定した条件に一致する最初の要素を返します。

const array = [1, 2, 3, 4, 5];

console.log(
    array.find(function(element) {
        return element < 3 // 3より小さい
    })
);

出力結果

1

アロー関数(ES2015[ES6])にするとこんな感じ

array.find((element) => {
    return element < 3 // 3より小さい
})

より短く

array.find(element => element < 3)

続きを読む…»

JavaScriptにもPHPのarray_sumみたいな関数があったらな～とずっと思っていました。
ふとまた調べているとそれに近しい感じに出来るメソッドがあったのでご紹介します。

とりあえず配列を用意

const nums = [12, 23, 35, 41, 56, 64, 77];

関数を使った普通のやり方

const sum = function(nums) {
	let total = 0;
	for (let i = 0, len = nums.length; i < len; i++) total += nums[i];
	return total;
};

const total = sum(nums);

console.log({total});

ちなみに出力結果はこの通り

{ total: 308 }

そして調べていて発見したのがArray.reduceメソッドです。
書式：配列名.reduce( コールバック関数(結果の値, 要素の値), [初期値] )
初期値は省略可です。
続きを読む…»

配列化したオブジェクトの中から指定したプロパティだけを削除する方法。

fruits = [
    {
        name: "apple",
        color: "red",
        quantity: 3,
    },
    {
        name: "orange",
        color: "orange",
        quantity: 6,
    },
    {
        name: "grape",
        color: "purple",
        quantity: 10,
    }
];

ログを出力して中身を確認します。

console.log({fruits});

出力結果

{
  fruits: [
    { name: 'apple', color: 'red', quantity: 3 },
    { name: 'orange', color: 'orange', quantity: 6 },
    { name: 'grape', color: 'purple', quantity: 10 }
  ]
}

forEachとdeleteを使ってquantityプロパティを削除します。

fruits.forEach(element => delete element.quantity);

ログを出力して中身を確認しましょう。

console.log({fruits});

出力結果

{
  fruits: [
    { name: 'apple', color: 'red' },
    { name: 'orange', color: 'orange' },
    { name: 'grape', color: 'purple' }
  ]
}

quantityプロパティだけが削除されました。

プロパティを追加する

先ほどとは逆に、配列化したオブジェクトにプロパティを追加してみましょう。

元のオブジェクト配列

fruits = [
    {
        name: "apple",
        color: "red",
    },
    {
        name: "orange",
        color: "orange",
    },
    {
        name: "grape",
        color: "purple",
    }
];

追加するオブジェクト配列

quantities = [
    {
        quantity: 3
    },
    {
        quantity: 6
    },
    {
        quantity: 10
    }
];

forEachとObject.assignを使ってquantityプロパティを追加します。

fruits.forEach((element, index) => Object.assign(element, quantities[index]));

console.log({fruits});

出力結果

{
  fruits: [
    { name: 'apple', color: 'red', quantity: 3 },
    { name: 'orange', color: 'orange', quantity: 6 },
    { name: 'grape', color: 'purple', quantity: 10 }
  ]
}

substrは文字列から指定した部分を取り出せるメソッドです。
指定した位置から指定した長さの文字列を返します。

const str = 'Mozilla';

console.log(str.substr(1, 2));
// expected output: "oz"

console.log(str.substr(2));
// expected output: "zilla"

しかしsubstrはECMAScriptとしては古い機能とされていて、将来的に削除される可能性があるため、出来れば使用しないようにしましょう。

substrの代わりにsubstringメソッドを使いましょう。

substring

const str = 'Mozilla';

console.log(str.substring(1, 3));
// expected output: "oz"

console.log(str.substring(2));
// expected output: "zilla"

substrの引数は開始位置と返される文字列の文字数でしたが、substringは開始位置と終了位置となりますので注意が必要です。

構文

str.substring(indexStart[, indexEnd])

引数

indexStart: 返される部分文字列の、最初の文字を含んだ位置
indexEnd: 返される部分文字列から外される最初の文字の位置

戻り値

与えられた文字列から抽出された区間を含む新しい文字列

indexEndが省略された場合は文字列の最後までの文字を取り出します。
indexStartがindexEndと等しい場合は空の文字列を返します。
indexStartがindexEndより大きかった場合は2つの引数が交換されたものとして実行されます。