HOME       LIST

【Javascript】チェックボックスとリストボックスを連動させよ

Javascript-チェックボックスとリストボックスを連動させよ チェックボックスにチェックした内容をリストボックスに取り込むサンプル


<html>
<head><title>Javascript-チェックボックスとリストボックスを連動させよ</title>
<script type="text/javascript">
<!--
function fncListBox(){
  var chk = frm1.chkb.length;

  //全部削除
   var loop = document.frm1.selMenuList.length;
   for(var i=0;i < loop;i++){
      document.frm1.selMenuList.remove(0);
   }

  //選択した項目を追加
   for(var i=0;i < chk;i++){
     if(frm1.chkb[i].checked == true){
        var obj = frm1.chkb[i];
        document.frm1.selMenuList.options[document.frm1.selMenuList.length] = new Option(obj.getAttribute("view"),obj.getAttribute("value"));
     }
  }
}
//-->
</script>
</head>
<body>
<form name="frm1">
<input type="checkbox" name="chkb" value="http://www.yahoo.co.jp" view="JAPAN YAHOO" />JAPAN YAHOO <br />
<input type="checkbox" name="chkb" value="http://www.yahoo.com" view="USA YAHOO" />USA YAHOO <br />
<input type="checkbox" name="chkb" value="http://www.google.co.jp" view="JAPAN GOOGLE" />JAPAN GOOGLE <br />
<input type="checkbox" name="chkb" value="http://www.dojeun.com" view="dojeun.com" />dojeun.com <br />
<hr>
<input type="button" value="生成" onclick="fncListBox()" /><br />
<select id="selMenuList"></select>
</form>
</body>
</html>

以前コンテンツ:【Javascript】文書の最終更新日を自動で表示する。
次のコンテンツ:【Javascript】div タグでフレーム効果を出す



Copyright(c) 2007-2024 dojeun.com All Rights Reserved.

Valid XHTML 1.0 Transitional