Question

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

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

Answer 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

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

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

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

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

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

4 个答案: