DOJEUN's Notepad
 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>