JS获取文本框,下拉框,单选框的值的简单实例


当然,我可以为你提供JavaScript中获取文本框(input type="text")、下拉框(select)和单选框(input type="radio")值的简单实例。

### 文本框(Textbox)

HTML:


<input type="text" id="textbox" value="Hello, World!">
<button onclick="getTextboxValue()">获取文本框值</button>

JavaScript:


function getTextboxValue() {
    var value = document.getElementById('textbox').value;
    console.log(value); // 输出文本框的值
}

### 下拉框(Select)

HTML:


<select id="selectbox">
    <option value="option1">选项1</option>
    <option value="option2" selected>选项2</option>
    <option value="option3">选项3</option>
</select>
<button onclick="getSelectboxValue()">获取下拉框值</button>

JavaScript:


function getSelectboxValue() {
    var value = document.getElementById('selectbox').value;
    console.log(value); // 输出下拉框选中项的值
}

### 单选框(Radio Button)

HTML:


<input type="radio" id="radio1" name="radiogroup" value="radio1">
<label for="radio1">单选1</label><br>
<input type="radio" id="radio2" name="radiogroup" value="radio2" checked>
<label for="radio2">单选2</label><br>
<button onclick="getRadioboxValue()">获取单选框值</button>

JavaScript:


function getRadioboxValue() {
    var radios = document.getElementsByName('radiogroup');
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            var value = radios[i].value;
            console.log(value); // 输出被选中的单选框的值
            break;
        }
    }
}

以上代码展示了如何在JavaScript中获取文本框、下拉框和单选框的值,并通过控制台输出这些值。你可以将这些代码片段放入你的HTML文件中,并尝试运行它们来查看效果。