Javascript 要在更改时在文本字段的右侧显示绿色复选标记吗
我用一系列文本字段创建了一个非常基本的html表单。我只是在寻找一种方法，如果输入了某个值，则在字段右侧显示绿色复选框。我尝试了一些CSS（对它不太了解），但没有效果。有什么想法吗？我找了很久了。这是我到目前为止所拥有的。谢谢Javascript 要在更改时在文本字段的右侧显示绿色复选标记吗,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我用一系列文本字段创建了一个非常基本的html表单。我只是在寻找一种方法，如果输入了某个值，则在字段右侧显示绿色复选框。我尝试了一些CSS（对它不太了解），但没有效果。有什么想法吗？我找了很久了。这是我到目前为止所拥有的。谢谢 <!DOCTYPE html> <html> <head> <title>CRM Application Form</title> <style type="tex
<!DOCTYPE html>
<html>
<head>
<title>CRM Application Form</title>
<style type="text/css">
label.valid {
width: 24px;
height: 24px;
background: url(assets/img/valid.png) center center no-repeat;
display: inline-block;
text-indent: -9999px;
}
label.error {
font-weight: bold;
color: red;
padding: 2px 8px;
margin-top: 2px;
}
</style>
</head>
<body>
<h1 style="text-align:center">CRM Application Form</h1>
<form>
<fieldset style="background-color:lightgray">
<legend style="font-weight:600">Personal Information</legend>
Date of Birth:
<input type="date" id="DOB" name="DOB" required><br>
Social Security #:
<input type="text" id="SS#" name="SS#" value="" onchange="checkField(this.value)"><br>
Location:
<input type="text" id="Location" name="Location" /><br>
Ethnicity:
<input type="text" id="Ethnicity" name="Ethnicity" /><br />
Citizenship:
<input type="radio" id="Yes" name="Yes" value="Yes" />Yes
<input type="radio" id="No" name="No" value="No" />No<br />
Gender:
<input type="text" id="Gender" name="Gender" /><br />
Marital Status:
<input type="text" id="Marital Status" name="Marital Status" /><br />
Previous Last Name:
<input type="text" id="PLN" name="PLN" /><br />
</fieldset>
<fieldset style="background-color:lightgray">
<legend style="font-weight:600">Contact Information</legend>
Address:
<input type="text" id="Address" name="Address" required><br />
Email:
<input type="email" id="email" name="email" required><br />
</fieldset>
<fieldset style="background-color:lightgray">
<legend style="font-weight:600">Education</legend>
Education History:
<input type="text" id="EH" name="EH" /><br />
Academic Level:
<input type="text" id="AL" name="AL" /><br />
</fieldset>
<fieldset style="background-color:lightgray">
<legend style="font-weight:600">Other Information</legend>
Military Status:
<input type="text" id="MS" name="MS" /><br />
POI:
<input type="text" id="POI" name="POI" /><br>
Employment Goal:
<input type="text" id="EG" name="EG" /><br />
Program:
<input type="text" id="Program" name="Program" /><br />
Market Segment:
<input type="text" id="Mkt" name="Mkt" /><br />
FA:
<input type="checkbox" id="FA" name="FA" />
Payment:
<input type="checkbox" id="Payment" name="Payment" /><br />
Notes:<br />
<textarea id="Notes" name="Notes"> </textarea><br />
</fieldset>
<input type="submit" />
</form>
</body>
</html>
客户关系管理申请表
label.valid{
宽度：24px；
高度：24px；
背景：url（assets/img/valid.png）中心不重复；
显示：内联块；
文本缩进：-9999px；
}
标签错误{
字体大小：粗体；
颜色：红色；
填充：2px8px；
边缘顶部：2倍；
}
客户关系管理申请表
个人信息
出生日期:
社会保障：
地点：
种族：
公民身份：
对
否
性别：
婚姻状况：
前姓：
联系方式
地址:
电邮：
教育类
教育史：
学术水平：
其他资料
军事地位：
POI：
就业目标：
节目：
细分市场：
FA:
付款：
注：
<input type='text' id='tbTest1' class='CheckChange'/>
<img src='CheckMark.jpg' style='display:none;'/>
下面是一个动态插入图像的想法。在本例中，我使用了一个
div$（函数（）{
$（'input'）.change（函数（）{
变量$input=$（此），
$flag=$input.next（）；
if（！$input.val（））{
$flag.remove（）；
}
如果（$flag.length==0 | |！$flag.is（'.valid'））{
$input.after（''）；
}
});
});
。有效{
显示：内联块；
宽度：20px；
高度：20px；
背景颜色：绿色；
}
所以不是“为我编写代码”网站。如果您有特定的问题，请随时提出新问题。@Scimmonster他没有要求别人为他编写代码-尽管我猜他会喜欢这样。@NicholasKyriakides是的，因为目前还没有任何JS试图这样做。@scimonester那么我建议你将他重定向到那里，并告诉他下次进行更彻底的搜索。去学习CSS和JS:DThanks Talmid怎么样。我最终使用了JQuery toggle（）函数。这很有帮助。
$("#document").ready(function(){
$(".CheckChange input[type='text']").on("change", function(){
if ($(this).val().length > 0)
$(this).next("img").show();
else
$(this).next("img").hide();
});
});