如何清空关注复选框更改的切换文本框?
How to empty a toggled text box that has focus on a change of check box?
我有这个 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>
我有这个 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>