チェックボックスの値選択時のテキスト領域ベースの追加または削除

上記のチェックボックスのユーザー選択に基づいて、テキスト領域にチェックボックス「変数値」を追加する方法を教えてください。私はそれを追加または削除する必要がありますドロップダウンはうまく動作するようにチェックボックスの傾きに役立つように役立つ必要があります。ここでチェックボックスの値選択時のテキスト領域ベースの追加または削除

は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>

出典

2012-04-30 Blnukem

あなたはjqueryのを使用していますか？ –

"変数値"とは、チェックボックスの名前を意味しますか？ –

ImageVar1 = '画像1の値' – Blnukem

は、ここでそれを行うにはノーフレームワーク（なしの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-30 18:01:54

「追加または削除する必要があります。どちらの例も削除部分を実行しません。 – j08691

@ j08691 - 今はそうです。 –

チェックボックスの値選択時のテキスト領域ベースの追加または削除

答えて

関連する問題