jQuery 1.8.2でラベルの作成 : JavaScript

Tweet

Pocket

jQuery 1.8.2でチェックボックスを作成するメモ。

作成するチェックボックス

<div class="example">
    <label><input type="checkbox" name="example" value="value1"><span>Value1</span></label>
    <label><input type="checkbox" name="example" value="value2"><span>Value2</span></label>
</div>

作成スクリプト

var wrapper = $('<div class="example">');
// Value1
var item = $('<input type="checkbox" name="example" value="value1">');
var label = $('<label>');
item.appendTo(label);
var span = $('<span>Value1</span>')
span.appendTo(label);
label.appendTo(wrapper);
// Value2
item = $('<input type="checkbox" name="example" value="value2">');
label = $('<label>');
item.appendTo(label);
span = $('<span>Value2</span>')
span.appendTo(label);
label.appendTo(wrapper);
// wrapperを親要素へ追加

チェックされた値の取得

var validation = [];
$(':checkbox[name="example"]:checked').each(function(index, checkbox) {
  validation[index] = $(checkbox).val();
});
// validation配列はチェックされた項目のvalue値を持つ。