javascript - 通过上一个复选框更改文本框值-6ren

javascript - 通过上一个复选框更改文本框值

转载作者：行者123 更新时间：2023-11-27 23:55:15

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="ios7-switches.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.switch {
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.switch input[type="checkbox"],
.switch input[type="radio"] {
  display: none;
}
.switch input[type="checkbox"] + label,
.switch input[type="radio"] + label {
  display: block;
  position: relative;
  vertical-align: middle;
  border: 1px solid #e3e3e3;
  border-radius: 15px;
  background-color: #e3e3e3;
  cursor: pointer;
  height: 30px;
  width: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition-property: border, background-color;
  -moz-transition-property: border, background-color;
  transition-property: border, background-color;
}
.switch input[type="checkbox"] + label, .switch input[type="checkbox"] + label:after, .switch input[type="checkbox"] + label:before,
.switch input[type="radio"] + label,
.switch input[type="radio"] + label:after,
.switch input[type="radio"] + label:before {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.switch input[type="checkbox"] + label:after, .switch input[type="checkbox"] + label:before,
.switch input[type="radio"] + label:after,
.switch input[type="radio"] + label:before {
  display: inherit;
  content: " ";
  background: white;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
}
.switch input[type="checkbox"] + label:before,
.switch input[type="radio"] + label:before {
  border-radius: 15px;
  background-color: white;
  height: 28px;
  width: 48px;
}
.switch input[type="checkbox"] + label:after,
.switch input[type="radio"] + label:after {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 14px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  height: 28px;
  width: 28px;
}
.switch input[type="checkbox"]:checked + label,
.switch input[type="radio"]:checked + label {
  border-color: #2ecc71;
  background-color: #2ecc71;
}
.switch input[type="checkbox"]:checked + label:before,
.switch input[type="radio"]:checked + label:before {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.switch input[type="checkbox"]:checked + label:after,
.switch input[type="radio"]:checked + label:after {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -ms-transform: translateX(20px);
  -o-transform: translateX(20px);
  transform: translateX(20px);
}
.switch input[type="checkbox"]:disabled + label, .switch input[type="checkbox"]:disabled:checked + label,
.switch input[type="radio"]:disabled + label,
.switch input[type="radio"]:disabled:checked + label {
  background-color: #e3e3e3;
  border-color: #e3e3e3;
  cursor: default;
  box-shadow: none;
}
.switch input[type="checkbox"]:disabled + label:before, .switch input[type="checkbox"]:disabled:checked + label:before,
.switch input[type="radio"]:disabled + label:before,
.switch input[type="radio"]:disabled:checked + label:before {
  background-color: #e3e3e3;
}
.switch.switch-warning input:checked + label {
  background-color: #e67e22;
  border-color: #e67e22;
  box-shadow: inset 0px 0px 0px 16px #e67e22;
}
.switch.switch-danger input:checked + label {
  background-color: #e74c3c;
  border-color: #e74c3c;
  box-shadow: inset 0px 0px 0px 16px #e74c3c;
}
.switch.switch-info input:checked + label {
  background-color: #3498db;
  border-color: #3498db;
  box-shadow: inset 0px 0px 0px 16px #3498db;
}   
</style>
</head>
<body>

      <div class="switch">
        <input type="checkbox" checked="checked" name="cb3" id="cb3" />
        <label for="cb3"></label>
      </div>

<input type="textbox" id="num" class="value" value="1" />

      <div class="switch">
        <input type="checkbox" name="cb1" id="cb1" />
        <label for="cb1"></label>
      </div>

<input type="textbox" id="num" class="value" value="0" />
<script type="text/javascript">
var checkbox = $("input[type=checkbox]"),
    textbox = $("input[type=textbox]");

checkbox.click(function() {
    var value = textbox.attr('value');
    textbox.attr('value', value === '0' ? '1' : '0');
});   
</script>
</body>

</html>

实际上文本框应该依赖于之前的复选框。

我的意思是如果复选框 1 为绿色，则文本框 1 的值为 0如果 chbok1 是白色 txbox1 是 1.

它也与其他复选框相同。

基本上文本框应该依赖于前一个复选框。

我试过这种方法，但是不行

$(this).parents().siblings('.value').val(1);

提前致谢!

最佳答案

我希望你正在寻找这个:

var checkbox = $("input[type=checkbox]"),
    textbox = $("input[type=textbox]");

checkbox.click(function() {
    if ($(this).prop('checked') === true){
      $(this).closest('.switch').next('input[type="textbox"]').val('1');  
    }
    else{
      $(this).closest('.switch').next('input[type="textbox"]').val('0');
    }
 });

.switch {
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.switch input[type="checkbox"],
.switch input[type="radio"] {
  display: none;
}
.switch input[type="checkbox"] + label,
.switch input[type="radio"] + label {
  display: block;
  position: relative;
  vertical-align: middle;
  border: 1px solid #e3e3e3;
  border-radius: 15px;
  background-color: #e3e3e3;
  cursor: pointer;
  height: 30px;
  width: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition-property: border, background-color;
  -moz-transition-property: border, background-color;
  transition-property: border, background-color;
}
.switch input[type="checkbox"] + label, .switch input[type="checkbox"] + label:after, .switch input[type="checkbox"] + label:before,
.switch input[type="radio"] + label,
.switch input[type="radio"] + label:after,
.switch input[type="radio"] + label:before {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.switch input[type="checkbox"] + label:after, .switch input[type="checkbox"] + label:before,
.switch input[type="radio"] + label:after,
.switch input[type="radio"] + label:before {
  display: inherit;
  content: " ";
  background: white;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
}
.switch input[type="checkbox"] + label:before,
.switch input[type="radio"] + label:before {
  border-radius: 15px;
  background-color: white;
  height: 28px;
  width: 48px;
}
.switch input[type="checkbox"] + label:after,
.switch input[type="radio"] + label:after {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 14px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  height: 28px;
  width: 28px;
}
.switch input[type="checkbox"]:checked + label,
.switch input[type="radio"]:checked + label {
  border-color: #2ecc71;
  background-color: #2ecc71;
}
.switch input[type="checkbox"]:checked + label:before,
.switch input[type="radio"]:checked + label:before {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.switch input[type="checkbox"]:checked + label:after,
.switch input[type="radio"]:checked + label:after {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -ms-transform: translateX(20px);
  -o-transform: translateX(20px);
  transform: translateX(20px);
}
.switch input[type="checkbox"]:disabled + label, .switch input[type="checkbox"]:disabled:checked + label,
.switch input[type="radio"]:disabled + label,
.switch input[type="radio"]:disabled:checked + label {
  background-color: #e3e3e3;
  border-color: #e3e3e3;
  cursor: default;
  box-shadow: none;
}
.switch input[type="checkbox"]:disabled + label:before, .switch input[type="checkbox"]:disabled:checked + label:before,
.switch input[type="radio"]:disabled + label:before,
.switch input[type="radio"]:disabled:checked + label:before {
  background-color: #e3e3e3;
}
.switch.switch-warning input:checked + label {
  background-color: #e67e22;
  border-color: #e67e22;
  box-shadow: inset 0px 0px 0px 16px #e67e22;
}
.switch.switch-danger input:checked + label {
  background-color: #e74c3c;
  border-color: #e74c3c;
  box-shadow: inset 0px 0px 0px 16px #e74c3c;
}
.switch.switch-info input:checked + label {
  background-color: #3498db;
  border-color: #3498db;
  box-shadow: inset 0px 0px 0px 16px #3498db;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="switch">
        <input type="checkbox" checked="checked" name="cb3" id="cb3" />
        <label for="cb3"></label>
      </div>

<input type="textbox" id="num" class="value" value="1" />

      <div class="switch">
        <input type="checkbox" name="cb1" id="cb1" />
        <label for="cb1"></label>
      </div>

<input type="textbox" id="num" class="value" value="0" />

关于javascript - 通过上一个复选框更改文本框值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29989987/

文章推荐： c++ - 遍历 vector 并删除内容

文章推荐： javascript - 如何使用 superagent-mock 作为临时后端

文章推荐： C++:一个对象既可以存储也可以不存储吗？

javascript - 将数据从应用程序组件[文本框]传递到网站组件[文本框]
我正在为一个网站开发应用程序(我无法访问该网站)。所以我想做以下事情: 那么如何将文本数据从 Android View 传递到网页中的文本框并捕获来自网站的响应？我试图记住这一切我无法访问任何网站
Silverlight 文本框
我有一个文本框，里面有一个很长的 url。我想做的是，当用户点击主页按钮时，我希望光标移动到文本框的开头。我希望这是正常行为，但事实并非如此，当文本框内的文本很长时，我点击回家，它会转到文本框中当前
带有图像的 WPF 文本框
我正在做一个WPF登录界面。在我的登录面板中，我有一个登录 TextBox和 PasswordBox .如下图第一张所示，登录文本框中有一个小人类标志，密码框中有一个锁。我将图像设置为文本框背景，然后
wpf - 文本框 - 水平文本居中
是否有任何简单的方法可以使文本在文本框中居中？我正在寻找一些内置函数，但什么也没找到。最佳答案将 TextAlignment 属性设置为 Center: 关于wpf - 文本框 - 水平文本居中
Powershell 文本框 SecureString
是否可以使用 System.Windows.Forms.TextBox(或任何其他方法)输入可随后转换为安全字符串的文本？我希望能够获取输入的值，将其转换为安全字符串并将其写入一个文件，然后可以在需要
Powershell 文本框 SecureString
是否可以使用 System.Windows.Forms.TextBox(或任何其他方法)输入可随后转换为安全字符串的文本？我希望能够获取输入的值，将其转换为安全字符串并将其写入一个文件，然后可以在需要
java - Android 文本框
我想将纬度和经度的值返回到我的 EditText 中，我已经能够使用 Toast 来做到这一点，但没有通过实现它>编辑文本。请帮忙 // EditText latEditText =
Jquery Iframe 文本框
我是Jquery新手，其实我对JQuery的使用知识是0。我正在尝试使用 JQuery 来实现某些功能。我有一个带有 iframe 的 html 页面。 iframe 页面中有一个表单和一个文本框。
c# - 在动态创建的事件处理程序中访问动态创建的控件(文本框)
我正在尝试在 Button 的事件处理程序中访问我在 C# 中动态创建的 TextBox。 void MainFormLoad(object sender, EventArgs e)
javascript - 文本框 -> 立即开始输入而不是单击文本框
我有一个搜索栏，当我打开搜索栏时，我想立即开始输入，不想点击文本框。我尝试使用 myTextBoxId.click()(因为当您单击它时，您可以开始输入)但它不起作用。最佳答案你必须 docum
Javascript 文本框 "Scrubber"
我还没有找到好的解决方案:我有一个文本框，用户需要能够在其中输入特定信息。例如，命令可能是“9030 OUT FU [1234 TEST]”。我需要“擦洗”这个文本框以确保数据是以这种格式输入的(不
Java 文本框 - 将字节转换为字符串
我有一个 Java 应用程序，您可以在其中将字符串输入文本框，点击加密，它会在单独的文本框中显示加密的字符串。我将为此使用 AES 加密。问题是我无法让加密文本按字节显示，但文本框不会显示字节(仅采用
html - 文本框，将文本带到文本框中的下一行
我已经浏览了您庞大的问题数据库，但似乎没有找到答案。我在将文本换行时遇到问题 - 即使之前的行上仍有空间。这是代码: p1 { border-left: 6px solid blue; bac
javascript - 如何触发按钮打开用户输入/文本框
所以我正在尝试创建“看板/待办事项列表”网站，但我在触发添加按钮时遇到了问题。我试图触发“添加”按钮以打开用户输入框。所以我有这个创建一个小框的“添加”按钮。但我无法弄清楚如何在该框中添加一个小区域，
javascript - JavaScript 文本框
我有一个文本框，应该只接受浮点值。它不应该允许任何其他值。怎么做。我在 HTML 中完成了此操作。 Weight 但是，它不起作用？如何做到这一点。最佳答案 // remo
javascript - 文本框 - 如何不显示已填充的值
当用户点击文本框时，如何不显示出现在文本框下方的已填充值最佳答案将这个属性放在你的文本框中 autocomplete="off" 关于javascript - 文本框 - 如何不显示已填充的值，我
javascript - flex 文本框
JavaScript: function resize(elem){ if(!elem.value.length) elem.size=1; else elem.size=elem.value
带有两个按钮的 HTML 文本框
在我的代码下面，我需要它具有相同的宽度和高度，但有多行“从第一行开始”，当到达行尾时转到新行，只有 120 个字符，就像我用“Enter短信”当您向右单击时隐藏，但我需要它为灰色。最佳答案您可以使
C#、文本框、.NET
我有一个问题，我必须创建一种方法来搜索显示在多个文本框 (lblResult.Text) 中的选定文本文件的内容。使用简单的搜索算法:搜索用户输入的整个搜索词。例如，如果用户输入“hello”，则只搜
c# - 文本框.SelectionStart
我正在尝试对文本框使用 SelectionStart 和 SelectionLength 属性。它没有效果，但也没有错误。它实际上是后台工作程序 ProgressChanged 方法的一部分，但我已经

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 通过上一个复选框更改文本框值