[英]Check Box Value Add Or Remove Into Text Area Base On Selection
How can I add the check-box "variable value" to my text area based on the users selection of check boxes above. 如何根据用户对以上复选框的选择,将复选框“变量值”添加到我的文本区域。 I need it to add or remove, The drop-down works fine just need help with the check-box's cant seem to get them to work.
我需要添加或删除它,该下拉列表可以正常工作,只需要复选框不能正常显示的帮助即可。
Here is the code that II have so far: 这是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> </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> </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>
Here's a no-framework (no jQuery/prototype) way way to do it. 这是一种无框架(无jQuery /原型)的方式。
Example: http://jsfiddle.net/S5vcW/6/ 示例: http : //jsfiddle.net/S5vcW/6/
Though some browsers support document.querySelectorAll("input[type='checkbox']")
which would make the script much simpler and more efficient. 尽管某些浏览器支持
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], "");
}
}
}
}
And Here's a jQuery version that accomplishes the same thing. 这是完成相同功能的jQuery版本。
Example: http://jsfiddle.net/S5vcW/5/ 示例: 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')], ""));
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.