Javascript - 单击按钮以填充文本框答案

【问题标题】：Javascript - click on buttons to populate text boxJavascript - 单击按钮以填充文本框
【发布时间】：2012-12-07 01:21:12
【问题描述】：

这非常有效 - 使用下拉框找到了这个示例并进行了修改 - 当然还有一些帮助！

<!DOCTYPE html>
<html>
<head>
<script> function moveNumbers(num) {
var txt=document.getElementById("result").value;
txt=txt + num;
document.getElementById("result").value=txt;
}
</script>

</head>

<body>
<form>

Select numbers: <br> <input type="button" value="1" name="no"     onclick="moveNumbers(this.value)">  
<input type="button" value="2" name="no" onclick="moveNumbers(this.value)">  
<input type="button" value="3" name="no" onclick="moveNumbers(this.value)">  
<input type="text" id="result" size="20">

</form>
</body>
</html>

【问题讨论】：

如果你想用 333 填充文本框怎么办？ “单击复选框 3，然后取消选中它，然后再次单击”？
@raina77ow 好问题！ user1916335 : 告诉我们你的尝试！
333 - 我想我需要 3 个复选框列表？按钮呢？每次我单击按钮时，它都会向文本框添加一个值？
到目前为止，我尝试的是使用 PHP 设置 3 个复选框列表 - 在提交 HTML 表单之前，我单击每组以存储数字。试图把它归结为一组数字 -
@GRicks - 考虑将您现有的代码添加到问题中，以向我们展示您已经完成的工作。这将使我们能够建议修改以使其达到您正在寻找的状态。就目前而言，这里没有足够的细节来给你一个可靠的答案。

标签： php javascript

【解决方案1】：

HTML：

<input type="text" id="screen" />
<div id="keypad">
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <br />
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <br />
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <br />
    <button>0</button>
</div>

JavaScript：

window.onload = function () {
    var screen  = document.getElementById('screen'),
        keypad  = document.getElementById('keypad'),
        buttons = keypad.getElementsByTagName('button');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
            screen.value = screen.value + this.innerHTML;
            return false;
        };
    }
};

完整示例：

<!DOCTYPE HTML>
<html>
<head></head>
<body>
    <form onsubmit="javascript: /* Just for testing */ alert('Sending...'); return false;">
        <input type="text" id="screen" />
        <div id="keypad">
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <br />
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <br />
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <br />
            <button>0</button>
        </div>
    </form>
    <script>
        window.onload = function () {
            var screen  = document.getElementById('screen'),
                keypad  = document.getElementById('keypad'),
                buttons = keypad.getElementsByTagName('button');
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function () {
                    screen.value = screen.value + this.innerHTML;
                    // Try to comment line below to see what happens
                    return false;
                };
            }
        };
    </script>
</body>
</html>

演示： JSFiddle

【讨论】：

正是我需要的——除了一件事！当我使用 JSFiddle 链接时 - 它完全按照我需要的方式工作。但是 - 当我把它放在我的表单中时 - 每次我点击这个数字时它都会提交表单。我尝试将代码放在表单之前 - 它不起作用......有什么想法吗？谢谢！
@GRicks 完成！我已经更新了 JSFiddle。刚刚在按钮的onclick 事件函数中添加了return false; 语句。
'@jackflash 仍然无法使用我的代码。我在我的 PHP 文件中发布了我当前使用的内容 - 谢谢。
@GRicks 我发布了一个完整的例子。对不起，我不能为你做任何其他事情。

【解决方案2】：

<input type="checkbox" id="checkBox1" onclick="app(1)">
<input type="checkbox" id="checkBox2" onclick="app(2)">
<input type="checkbox" id="checkBox2" onclick="app(3)">

<script language="javascript">
    function app(text)
    {
         var TheTextBox = document.getElementById("Mytextbox"); //Replace this with correct name
         TheTextBox.value = TheTextBox.value + text;
    }
</script>

【讨论】：

【解决方案3】：

工作示例： http://jsfiddle.net/KhwHY/1/

JQuery

$('input').click(function(){
    if(this.checked) {
        $('#Output').text($('#Output').text() + $(this).val());
    } else {
    }
});

HTML

<form>
    <input type="checkbox" value="1">1<br />
    <input type="checkbox" value="2">2<br /> 
    <input type="checkbox" value="3">3<br />
</form>

<div id="Output">

</div>

这应该为您提供一个很好的起点。

【讨论】：

【解决方案4】：

我完成了 90% 的工作，你从这里开始。 http://jsfiddle.net/MeWhp/

    <!DOCTYPE html>
<html>
<head>
  <style>
input, label { line-height: 1.5em; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<form>
  <div>
    <input type="checkbox" name="fruit" value="1" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="2" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="3" id="banana">
    <label for="banana">banana</label>
  </div>
  <textarea id="log">
   </textarea>
</form>

<script>

</script>
$("input").click(function() {
  $("#log").html( $(":checked").val() + " is checked!" );
});
</body>
</html>

【讨论】：