Javascript/Checkbox - a羅針盤

チェックボックス †

チェックボックスをList配列で処理するサンプルです。左上のチェックボックスをクリックするとそのチェックボックスによって全選択・全解除します。計算のボタンをクリックするとチェックボックスで選択した項目とその価格(チェックボックスのvalueに設定)をダイアログに表示します。
チェックボックスをList配列で処理する場合、チェックボックスのnameを同じにします（サンプルでは"clothes"）。
チェックボックスの値をList配列で取得する方法にはテーブルデータの読み書きで説明したように以下の3方法があります。

document.getElementsByName("clothes")とgetElementsByNameメソッドでList配列を取得
document.fashion.clothes[i]とdocumentの配列で直接処理
document.fashion.clothesでList配列を取得取得方法によりデータが0件、1件、2件以上のチェック方法が異なります。必ずチェックボックスが２つ以上ある場合は、この処理は不要です。

以下はHTML部分です。チェックボックスのINPUTタグにvalueに価格を設定しています。
チェックボックスを全選択、全解除する一番上のチェックボックスのnameはallとしています。

<div class="inside">
<form id="fashion" name="fashion">

<table id="shohin_table" border=1><tbody>
<tr><th><input type="checkbox" onclick="checkAll();" name="all"></th>
<th>項目</th></tr>
<tr><td><input type="checkbox" name="clothes" value="1000"></td>
<td>ポロシャツ</td></tr>
<tr><td><input type="checkbox" name="clothes" value="2000"></td>
<td>Tシャツ</td></tr>
<tr><td><input type="checkbox" name="clothes" value="3000"></td>
<td>カーデガン</td></tr>
<tr><td><input type="checkbox" name="clothes" value="4000"></td>
<td>セーター</td></tr>
<tr><td><input type="checkbox" name="clothes" value="5000"></td>
<td>ネルシャツ</td></tr>
<tr><td><input type="checkbox" name="clothes" value="6000"></td>
<td>パーカー</td></tr>
<tr><td><input type="checkbox" name="clothes" value="7000"></td>
<td>トレーナー</td></tr>

</tbody></table>
<BR>
<input id="calc" type="button" value="計算" name="calc" onclick="calculate();">
</form>
</div>

以下はDOMのgetElementsByNameメソッドでデータを取得するサンプルです。

function checkAll(){
    var check_name = "clothes";

    var flag =  document.getElementsByName("all")[0].checked;
    var checks = document.getElementsByName(check_name);
    for(i=0; i<checks.length; i++){
        checks[i].checked = flag;
    }
}

function calculate(){
    var check_name = "clothes";
    var text = "";
    var checks = document.getElementsByName(check_name);

    for (var i=0; i < checks.length; i++){
        if( checks[i].checked ){
            var objTR = checks[i].parentNode.parentNode;
            text += objTR.cells[1].innerHTML + checks[i].value + "円" + ",";
        }
    }
    if ( text == "" ) {
        text = 'チェックされていません。';
    } else {
        text = text.substr(0,text.length-1);
    }
    alert(text);
}

以下はFORMタグfashionよりデータを取得する方法のサンプルです。

isArray = function (vArg) {
    return !(vArg.length === undefined);
}

function checkAll(){
    var flag = document.fashion.all.checked;
    var checks = document.fashion.clothes;
    if ( checks == null ) {
        alert('No Checkbox');
        return false;
    } else if ( isArray(checks) == false ) {
        checks.checked = flag;
    } else {
        for( var i = 0; i < checks.length; i++){
            checks[i].checked = flag;
        }
    }
}

function calculate(){
    var text = "";
    var objTR;
    var checks = document.fashion.clothes;
    if ( checks == null ) {
        alert('No Checkbox');
        return false;
    } else if ( isArray(checks) == false ) {
        if( checks.checked ){
            objTR = checks.parentNode.parentNode;
            text = objTR.cells[1].innerHTML + checks.value + "円" + ",";
        }
    } else {
        for( var i = 0; i < checks.length; i++){
            if( checks[i].checked ){
                var objTR = checks[i].parentNode.parentNode;
                text += objTR.cells[1].innerHTML + checks[i].value + "円" + ",";
            }
        }
    }

    if ( text == "" ) {
        text = 'チェックされていません。';
    } else {
        text = text.substr(0,text.length-1);
    }
    alert(text);
}

以下はTABLEのID( = shohin_table )からDOMによりチェックボックスを全選択する関数とquerySelectorAllメソッドを使用してチェックされたデータを取得する方法のサンプルです。
querySelectorAllメソッドはIE7以前のバージョンでは動きません。従ってDOCTYPEを
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
とかしていても動きません。

function checkAll(){
    var flag =  document.getElementsByName("all")[0].checked;
    var shohin_table = document.getElementById("shohin_table");
    for ( var i = 1; i < shohin_table.rows.length; i++ ) {
        var check = shohin_table.rows[i].cells[0].firstChild;
        check.checked = flag;
    }
}

function calculate(){
    var text = "";
    var objTR;
    var checks=document.querySelectorAll('#shohin_table input[name=clothes]');

    for (var check of checks) {
        if( check.checked ){
            objTR = check.parentNode.parentNode;
            text += objTR.cells[1].innerHTML + check.value + "円" + ",";
        }
    }

    if ( text == "" ) {
        text = 'チェックされていません。';
    } else {
        text = text.substr(0,text.length-1);
    }
    alert(text);
}

前へ　一覧へ　次へ

Last-modified: 2015-12-03 (木) 20:47:08 (3288d)