javascript - 如何清空关注复选框更改的切换文本框？-6ren

javascript - 如何清空关注复选框更改的切换文本框？

转载作者：行者123 更新时间：2023-11-30 14:04:20

我有这个https://jsfiddle.net/5ep34nj8/5/切换功能效果很好。

此外，我想在未选中复选框时清空切换的文本框。我已经搜索了大约一个小时，但没有任何结果。

我试图将焦点移到文本框上，但它并没有改变任何事情。文本框不会像现在这样自行清空。

function toggleOtherLanguagesTextBox() {
  var effect = 'slide';
  $("#otherLanguagesPartial").toggle(effect, 0);
}

$("#otherLanguagesPartial").toggle(false);
$("#other").click(function() {
  toggleOtherLanguagesTextBox();

  if (!$("#other").is(":checked")) {
    $("#otherLanguages").focus(false);
    $("#otherLanguagesPartial").val("");
  }

  if ($("#other").is(":checked"))
    $("#otherLanguages").focus();
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #fff;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>

<body>
  <input type="checkbox" id="other" name="languages[]" value="Other" />
  <label for="other">Other</label>
  <div id="otherLanguagesPartial">
    <label for="otherLanguages">Please Specify:</label>
    <input type="text" id="otherLanguages" name="languages[]">
  </div>
</body>

<footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</footer>

最佳答案

当前您正在尝试清空 div 而不是 input。因此，请在您的点击方法中使用 $("#otherLanguages").val(""); 而不是 $("#otherLanguagesPartial").val(""); .

请参阅下面的代码段:

function toggleOtherLanguagesTextBox() {
  var effect = 'slide';
  $("#otherLanguagesPartial").toggle(effect, 0);
}

$("#otherLanguagesPartial").toggle(false);
$("#other").click(function() {
  toggleOtherLanguagesTextBox();

  if (!$("#other").is(":checked")) {
    $("#otherLanguages").focus(false);
    $("#otherLanguages").val("");
  }

  if ($("#other").is(":checked"))
    $("#otherLanguages").focus();
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #fff;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
</head>

<body>
  <input type="checkbox" id="other" name="languages[]" value="Other" />
  <label for="other">Other</label>
  <div id="otherLanguagesPartial">
    <label for="otherLanguages">Please Specify:</label>
    <input type="text" id="otherLanguages" name="languages[]">
  </div>
</body>

<footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</footer>

关于javascript - 如何清空关注复选框更改的切换文本框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55728230/

文章推荐： javascript - 对数组中的对象进行操作

文章推荐： c# - 为什么我在 XAML 中填充的通用列表在运行时为空？

文章推荐： c# - 以下 DateTime/TimeZone 示例有什么问题？

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何清空关注复选框更改的切换文本框？