Javascript超入門

チェック済でテキストフィールド入力可

.disabled　「要素を無効化します」

↓記述例↓　　サンプル


<html>
<head>
<script type="text/javascript">
<!--
function testCheck(cOBJ,fName) {
    document.FORM[fName].disabled = !cOBJ.checked;
}
//-->
</script>
</head>
<body>
<form name="FORM">
<input type="checkbox" onClick="testCheck(this,'etc')">その他
<input type="text" name="etc" disabled>
</form>
</body>
</html>

ページの上へ

チェックボックスの値を取得

document.formname.length 　▲フォームを構成するエレメントオブジェクトの配列の個数を取得

↓記述例↓　　サンプル


<html>
<head>
<script type="text/javascript">
<!--
function checktest() {
    //変数に代入
    d = document.Tform.elements;
    //初期化
    checkvalue = '';
    for (i = 0; i < d.length; i++ ) {
        //チェックボックスがONの時はその値を設定する
        if (d[i].checked == true) {
            checkvalue += d[i].value;
        }
    }
    //設定結果の表示
    document.Tform.result.value = checkvalue;
}
//-->
</script>
</head>
<body>
<form name="Tform">
<input type="checkbox" name="test" value="1">1
<input type="checkbox" name="test" value="2">2
<input type="checkbox" name="test" value="3">3
<input type="checkbox" name="test" value="4">4
<P>取得値表示：<input type="text" name="result"></P>
<input type="button" value="test" onclick="checktest()">
</form>

ページの上へ

全てのチェックボックス「チェック済・未チェック」

.checked　「チェックボックスおよびラジオボタンの状態を設定します」チェックされている場合は[true]を代入、チェックされていない場合は[false]を代入する。

↓記述例↓　　サンプル


<html>
<head>
<script type="text/javascript">
<!--
//全てのチェックを外す
function checkout() {
    for (i=1; i<5; i++) {
        document.FORM.elements['check'+i].checked = false;
    }
}
//全てをチェック済にする
function checkon() {
    for (i=1; i<5; i++) {
        document.FORM.elements['check'+i].checked = true;
    }
}
//-->
</script>
</head>
<body>
<form name="FORM">
<input type="checkbox" name="check1">赤　
<input type="checkbox" name="check2">青　
<input type="checkbox" name="check3">黄　
<input type="checkbox" name="check4">緑<br>
<input type="button" value="チェックを外す" onClick="checkout()">　
<input type="button" value="全てにチェック" onClick="checkon()">


</form>

ページの上へ