如何使用 javascript 添加复选框

How to add checkboxes using javascript

本文关键字：复选框 添加 javascript 何使用      更新时间：2023-09-26

我有一个html源代码，它有一个文本框，输入它并单击提交按钮会给你输入文本（如待办事项列表）。我想要该文本以及一个复选框。

这是你说的吗，试试演示，

JSFIDDLE 演示

.html

<div id="check">
    <input type="text" class="txt" value="" />
    <button type="button" class="btn">Click Me!</button>
</div>

jquery

$(document).ready(function () {
    $(".btn").on('click', function () {
        $('#check').append('<input type="checkbox" name="myCheckbox" />' + $(".txt").val());
    });
});

https://developer.mozilla.org/en-US/docs/XUL/checkbox

<checkbox label="Your checkbox" checked="true"/>

演示：jsFiddle

描述：这使用纯JavaScript而不是jQuery，因为您没有指定 jQuery。

.HTML 

<form onsubmit="test(event)" action="POST">
    <label for="textbox-1">Textbox: </label>
    <input type="text" id="textbox-1" />
    <label for="checkbox-1">Checkbox: </label>
    <input type="checkbox" id="checkbox-1"/>
    <input type="submit"/>
</form>

.JS

function test(event){
    event.preventDefault();
    var textbox1 = document.getElementById('textbox-1').value;
    var checkbox1 = document.getElementById('checkbox-1').checked;
    alert("Textbox value: " + textbox1 + " || checkbox: " + checkbox1);
}

注意：在 JavaScript 中，您只需将其发布到后端，您无需event.preventDefault也不需要获取变量。 但是，此代码可用于 AJAX 提交。

相关文章：