在每个复选框中动态单击时打开文本框
是一种常见的前端开发技术，可以通过JavaScript来实现。当用户单击复选框时，可以通过事件监听器来捕获该事件，并在事件处理函数中执行相应的操作，例如打开文本框。
以下是一个示例代码，演示了如何实现在每个复选框中动态单击时打开文本框的功能：
<!DOCTYPE html>
<html>
<head>
<script>
function toggleTextBox(checkboxId, textboxId) {
var checkbox = document.getElementById(checkboxId);
var textbox = document.getElementById(textboxId);
if (checkbox.checked) {
textbox.disabled = false;
} else {
textbox.disabled = true;
}
}
</script>
</head>
<body>
<label for="checkbox1">
<input type="checkbox" id="checkbox1" onclick="toggleTextBox('checkbox1', 'textbox1')">复选框1
</label>
<input type="text" id="textbox1" disabled><br>
<label for="checkbox2">
<input type="checkbox" id="checkbox2" onclick="toggleTextBox('checkbox2', 'textbox2')">复选框2
</label>
<input type="text" id="textbox2" disabled><br>
<label for="checkbox3">
<input type="checkbox" id="checkbox3" onclick="toggleTextBox('checkbox3', 'textbox3')">复选框3
</label>
<input type="text" id="textbox3" disabled><br>
</body>
</html>在上述代码中，我们为每个复选框和文本框分配了唯一的ID，并在复选框的onclick事件中调用了toggleTextBox函数。该函数根据复选框的选中状态来启用或禁用相应的文本框。
这种技术在表单中经常被使用，特别是当需要根据用户的选择动态显示或隐藏某些输入字段时。例如，在一个注册表单中，可以使用这种技术来实现用户选择是否填写附加信息的功能。
腾讯云提供了一系列的云计算产品，其中包括云服务器、云数据库、云存储等。您可以根据具体的需求选择适合的产品。以下是腾讯云相关产品的介绍链接：
- 腾讯云服务器（CVM）：提供弹性计算能力，可根据业务需求弹性调整计算资源。
- 腾讯云数据库（TencentDB）：提供多种数据库类型，如关系型数据库、NoSQL数据库等，满足不同的数据存储需求。
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于存储和管理各种类型的数据。
请注意，以上链接仅供参考，具体选择和推荐应根据实际需求和情况进行。
相关·内容
2回答
Javascript，对象之间的依赖关系
javascript、javascript-events
在我的表单上有checkbox1、checkbox2、checkbox3、textbox1和textbox2。
默认情况下，只有checkbox1处于活动状态。当我点击(选中) checkbox1时，checkbox2就被激活了。当我点击(选中) checkbox2时，checkbox3就被激活了。最后，当我选中checkbox3时，textbox1和textbox2都被激活了。
当我取消选中checkbox3时，两个文本框都被禁用。处于未选中状态的Checkbox2将禁用checkbox3。
如何维护这些对象之间的依赖关系？例如，当我取消选中checkbox1时，复选框2和3以及这两个文本框
浏览 3提问于2011-05-24得票数 0
回答已采纳
4回答
在jQuery中更改当前元素背景
javascript、jquery
<label class="default" for="checkbox1"><input id="checkbox1" name="checkbox1" type="checkbox" style="display:none" /> some text</label><br />
<label class="default" for="checkbox2"><input id="checkbo
浏览 0提问于2010-12-01得票数 0
回答已采纳
1回答
如何将复选框字段添加到用户帐户？
8、users
是否可以将多选项复选框字段添加到内容类型或用户类型的字段中？希望在用户注册帐户时可以创建以下内容。在注册时，他们应该能够选择多个复选框。
用户注册表单中的
所需输出：
<input type="checkbox" id="checkbox1" name="checkbox1" value="first-choice">
<label id="checkbox1-label" for="checkbox1">First Choice</label><br>
浏览 0提问于2019-07-21得票数 0
回答已采纳
4回答
复选框(Javascript)选择，第一项显示未定义？
javascript、html
我试图选择和返回一些项目(复选框)。一切都很好，但第一项总是没有定义。解决不了这个问题！
我的代码如下所示
function checkList () {
var checked;
var i;
for( i = 0; i < document.form1.length; i++) {
var element = document.form1[i]
if (element.type == "checkbox"){
if (element.checked == true){
checked = checked +
浏览 6提问于2015-06-09得票数 0
回答已采纳
2回答
阻止表单提交并在选中某些复选框时触发错误
javascript
如果选中了某个复选框，我会尝试阻止表单提交并触发span错误。如果复选框为3、4和6，则会选中。请注意，每个复选框组都有两条错误消息。
<form action="" method="" role="form" name="form1">
<span id="sprycheckbox1">
<span class="checkbox-error hide">
Your answer co
浏览 2提问于2014-05-06得票数 0
5回答
如何使用复选框和javascript显示/隐藏div？
javascript、jquery、html、checkbox
我看到了几个类似我正在寻找的帖子，但并不完全是我的确切情况。单击某些复选框时，我希望显示/隐藏html div。
我发现了以下几点：
<script>
jQuery(function(){
var checks = $('#checkbox1, #checkbox2, #checkbox3');
checks.click(function(){
if (checks.filter(':checked').length == checks.length) {
$('#purchaseFo
浏览 4提问于2016-02-04得票数 1
回答已采纳
1回答
我想要访问文本字段相对于相应复选框的值
php、javascript、mysql、html、phpmyadmin
我有3个文本字段和3个附加的复选框。我只想将那些文本框的值存储在一个varible中，该变量的相应复选框已被选中。在以下代码的帮助下，我可以访问所有文本框的值，但为此，我必须选中所有复选框，因为我希望对其进行选择。如果只选中了2个复选框，那么我希望在varible中只存储2个相应的文本框值。
HTML：
<html>
<head></head>
<body>
<form action="access.php" method="POST">
<tr>
浏览 0提问于2012-01-23得票数 1
回答已采纳
5回答
使用jquery选中/未选中复选框中添加/删除值
javascript、jquery、math、checkbox
我试图列出供用户选择以获取报价的选项列表，例如：
香蕉检查
苹果支票
未经检查的饼干
堵塞检查
每个选项有香蕉3美元，苹果2美元，饼干11美元，果酱1美元。
$4 + $2 + $1.20 = $7.20 (不需要饼干)
我希望在勾选/取消勾选复选框时更新总数。如果我要添加更多的选项，这些值似乎并不是在添加，而且我的代码看起来也很长。
我的代码
正如您可能知道的，我对JavaScript/jQuery非常陌生。
Html：
<input type="checkbox" name="checkbox1" id="checkbo
浏览 8提问于2015-01-07得票数 1
回答已采纳
2回答
如何用文本框的vale添加复选框的值
javascript、jquery、asp.net
在这里，我希望用textbox(id=TextBox1)添加多个复选框的值，并在不使用任何按钮的情况下在textbox(id=TextBox2)中显示它。示例:如果我选择checkbox1和checkbox3，那么总数将为30，并且它将被添加到textbox1(这是自动操作的用户无法编辑它)，然后它应该显示在textbox2中，而不使用任何按钮。
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<as
浏览 1提问于2017-03-08得票数 0
回答已采纳
5回答
通过多个复选框显示/隐藏DIV
javascript、jquery、html、show-hide
我试图在div中显示/隐藏一个表单，条件是多个复选框。如果所有3都被选中，应该会出现div内容。如果未选中一个或多个div内容，则应隐藏div内容。
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style/bootstrap.css" rel="stylesheet">
<script src="js/jquery.js"></script>
&
浏览 2提问于2013-08-29得票数 1
回答已采纳
2回答
限制选择两个以上的复选框
javascript、html
当使用两个复选框时，我可以限制在time.How上选择一个复选框--我是否使用多个复选框来完成这个任务？这是我的javascript：
<script type="text/javascript">
$(document).ready(function(){
$('#checkbox1').click(function() {
var checkedBox = $(this).attr("checked");
if (checkedBox === true) {
浏览 1提问于2017-01-05得票数 3
回答已采纳
3回答
带有多个复选框的Jquery下拉列表不会保存状态。
javascript、jquery、html、twitter-bootstrap
我有一个引导下拉列表，它有多个复选框。当我关闭并重新打开它时，默认情况下所有复选框都未选中。当我重新打开下拉列表时，我想查看先前选中了哪些复选框。
JSFiddle：
HTML：
<ul class="inline unstyled">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle select-value" data-placement=&#
浏览 1提问于2015-05-18得票数 0
回答已采纳
2回答
PHP复选框窗体-显示值
javascript、php、html
我的联系人表单中有一个复选框，我似乎无法显示通过php发送的电子邮件中的值。我知道这可能是一个isset问题，但我不能修复它来显示用户是否单击了复选框。
表格：
<script>
function _(id){ return document.getElementById(id); }
function submitForm(){
_("mybtn").disabled = true;
_("status").innerHTML = 'please wait ...';
var formdata = new F
浏览 0提问于2018-04-06得票数 0
4回答
如何计数所选复选框的数量，选中后更改背景，并使悬停继续工作
javascript、jquery、html、css
我希望创建一个复选框列表，用户可以选择，但是，将复选框的数量限制为5，并向用户显示他们当前单击了多少。
我还希望在复选框标签被选中后更改它们的背景色。
我的主要问题是，显示已选中多少复选框的数字总是落后一次。此外，背景颜色正在改变后，被选中，但悬停调用停止工作，如果选择。
最后，我想听听关于如何使我的计数函数更干净的任何建议。我不喜欢有7个如果陈述..。
$(document).ready(function() {
$("input[name='group_option[]']").change(function() {
var maxAllow
浏览 6提问于2016-07-18得票数 1
回答已采纳
1回答
将数据从复选框中保存到php数据库中的一行
php、mysql、database、checkbox、save
如何保存在复选框中选中并将插入到数据库中的一行的数据？例如，用户单击两个复选框(红色和蓝色)。单击“保存”按钮时，“红色”和“蓝色”的值将保存到“产品”表中的一行(颜色)。
这是我的html代码
<form action="" method="post">
<h3>Colors:</h3>
<input type="checkbox" name="checkbox1" value="White"> White </br>
浏览 4提问于2014-09-05得票数 0
回答已采纳
2回答
当另外两个复选框已经“选中”时，复选框‘选中’自动
javascript、jquery、html、checkbox
我有3个不同id、Checkbox1、checkbox2和checkbox3的复选框。如果选中checkbox1和checkbox2，我如何使复选框3自动选中。
html
<input type="checkbox" class="check" id="checkbox1">
<input type="checkbox" class="check" id="checkbox2">
<input type="checkbox" class="che
浏览 2提问于2017-02-13得票数 0
回答已采纳
5回答
CSS不会通过在HTML中调用JS进行更改
javascript、html、css、jquery-ui、dom
我的JS代码如下：
// JavaScript Document
function bubbleColor() {
if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked"))
{
$(".bubble").css("background-color", "red");
}
}
var el = document.getElementById(&
浏览 1提问于2013-09-24得票数 0
3回答
我正在使用javascript显示带有一些列表的复选框。
javascript
我正在使用复选框打印数组列表，情况是如果我单击一个复选框，它将显示数组中的数字列表，所以我的问题是，如果我单击它正在显示的任何复选框，如果我取消选中列表仍在显示中？所以我想要的代码，如果我取消选中我的列表应该去，当我点击它时，它应该显示。
var men=[1,2,5,4,8,1,5];
var women=[45,55,45];
var children=[256,365];
document.getElementById("checkbox1").onchange=function(){
for(i=0; i<men.le
浏览 0提问于2018-03-17得票数 0
1回答
如何在web表单中添加更新面板？
asp.net、webforms
我已经向网页添加了一个文本框、一个下拉列表、一个复选框、一个按钮和一个更新面板。在它的cs文件中，当下拉列表中的第二项被选中时，panel1变为可见，否则不可见。下面是该控件的序列。更新面板用于刷新特定部件。这是正确的方式吗？
//Textbox1
//Textbox2
//Textbox3
//dropdownlist having autopostback= true
//update panel start
//checkbox1
//checkbox2
//checkbox3
//simple panel non visible (panel1)
//checkbox4
//check
浏览 2提问于2011-11-21得票数 1
回答已采纳
1回答
使用CSS更改JQuery移动中复选框的宽度？
jquery、html、css
我试图将我的3个复选框的宽度设置为每个复选框的33%，但是无论我做什么，我都无法更改宽度。
HTML的表单/字段集部分如下所示：
<form class="form_attendance">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="form_attendance">
<legend>Attendance</legend>
<inp
浏览 0提问于2014-04-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
