0

上記のチェックボックスのユーザー選択に基づいて、テキスト領域にチェックボックス「変数値」を追加するにはどうすればよいですか。追加または削除する必要があります。ドロップダウンは正常に機能しますが、チェックボックスが機能しないように見えるので助けが必要です。

IIがこれまでに持っているコードは次のとおりです。

<html>
<head>

</head>

<body>


  Image 1 <input type="checkbox" name="ImageVar1" id="ImageVar1" /><br />
  Image 2 <input type="checkbox" name="ImageVar2" id="ImageVar2" /><br />
  Image 3 <input type="checkbox" name="ImageVar3" id="ImageVar3" /><br />
  Image 4 <input type="checkbox" name="ImageVar4" id="ImageVar4" />

<p>&nbsp;</p>

  <select id="dropdown">
    <option value="">None</option>
    <option value="textVar1">text 1</option>
    <option value="textVar2">text 2</option>
    <option value="textVar3">text 3</option>
    <option value="textVar4">text 4</option>
  </select>

<p>&nbsp;</p>

  <textarea id="mytext"></textarea>

<script type="text/javascript">

var textVar1 = 'this is going to be a long sting of text for text 1 value ';
var textVar2 = 'this is going to be a long sting of text for text 2 value ';
var textVar3 = 'this is going to be a long sting of text for text 3 value ';
var textVar4 = 'this is going to be a long sting of text for text 4 value ';

var ImageVar1 = 'Image 1 value ';
var ImageVar2 = 'Image 2 value ';
var ImageVar3 = 'Image 3 value ';
var ImageVar4 = 'Image 4 value ';

var mytextbox = document.getElementById('mytext');
var mydropdown = document.getElementById('dropdown');

mydropdown.onchange = function(){
mytextbox.value = mytextbox.value  + window[this.value];

}
</script>

</body>
</html>
4

1 に答える 1

1

これを行うためのフレームワークなし（jQuery /プロトタイプなし）の方法があります。

例： http： //jsfiddle.net/S5vcW/6/

一部のブラウザdocument.querySelectorAll("input[type='checkbox']")は、スクリプトをはるかに単純で効率的にすることをサポートしていますが。

var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type === "checkbox" && inputs[i].name.indexOf('ImageVar') > -1) {
        inputs[i].onchange = function(){
            if(this.checked){
                mytextbox.value = mytextbox.value  + ImageVars[this.name];
            }else{
                mytextbox.value = mytextbox.value.replace(ImageVars[this.name], ""); 
            }
        }
    }  
}

そして、これが同じことを実現するjQueryバージョンです。

例： http： //jsfiddle.net/S5vcW/5/

$("input[type='checkbox'][name*='ImageVar']").change(function(){
    var $chk = $(this); 
    if($chk.prop('checked')){
        $mytextbox.val($mytextbox.val() + ImageVars[$chk.attr('name')]);
    }else{
        $mytextbox.val($mytextbox.val().replace(ImageVars[$chk.attr('name')], "")); 
    }
});
于 2012-04-30T18:01:54.487 に答える