HOME       LIST

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

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

どのような状況に置かれても肯定的な思考をすること。 - 2017/03/18(DOJEUN)

I appreciate your honesty.(正直に言ってくれてうれしいです/正直に言ってくれてありがとう)


<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-2019 dojeun.com All Rights Reserved.

Valid XHTML 1.0 Transitional