<div class="answer_1">
<input id="1" class="1 inputs letter square border_black" maxlength="1" type="text" />
<input id="2" class="2 inputs letter square border_black" maxlength="1" type="text" />
<input id="3" class="3 inputs letter square border_black" maxlength="1" type="text" />
<input id="4" class="4 inputs letter square border_black" maxlength="1" type="text" />
<input id="5" class="5 inputs letter square border_black" maxlength="1" type="text" />
<input id="6" class="6 inputs letter square border_black" maxlength="1" type="text" />
<input id="7" class="7 inputs letter square border_black" maxlength="1" type="text" />
<button id="continue" class="btn btn-primary" value="Continue">Weiter</button>
</div>
此输入的值与点击图像上的JS字段相反（每个输入都是字段，点击其他图像）。我如何检查所有值是否为字段（我尝试使用keyup函数，但它只适用于manualy字段输入，而不是JS，如果它是clicke，进行一些css更改（例如，当所有输入值都是字段，然后更改div的背景） 感谢。
答案 0 :(得分：1)
试试这个：
$(document).ready(function(){
$('.btn').click(function(){
var isEmpty = false;
$('input[type="text"]').each(function(){
var len = $.trim($(this).val()).length;
if( len === 0)
isEmpty = true;
})
if (!isEmpty)
$('.answer_1').addClass('chn');
else
$('.answer_1').removeClass('chn');
})
})
$(document).ready(function(){
$('.btn').click(function(){
var isEmpty = false;
$('input[type="text"]').each(function(){
var len = $.trim($(this).val()).length;
if( len === 0)
isEmpty = true;
})
if (!isEmpty)
$('.answer_1').addClass('chn');
else
$('.answer_1').removeClass('chn');
})
}).chn {
background-color: green;
padding: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="answer_1">
<input id="1" class="1 inputs letter square border_black" maxlength="1" type="text" />
<input id="2" class="2 inputs letter square border_black" maxlength="1" type="text" />
<input id="3" class="3 inputs letter square border_black" maxlength="1" type="text" />
<input id="4" class="4 inputs letter square border_black" maxlength="1" type="text" />
<input id="5" class="5 inputs letter square border_black" maxlength="1" type="text" />
<input id="6" class="6 inputs letter square border_black" maxlength="1" type="text" />
<input id="7" class="7 inputs letter square border_black" maxlength="1" type="text" />
<button id="continue" class="btn btn-primary" value="Continue">Weiter</button>
</div>
答案 1 :(得分：1)
您可以使用以下示例中的jquery来执行javascript函数来检查已填充的元素。有很多方法，这是一个非常简单的方法。
<body>
<div class="answer_1">
<input id="1" class="1 inputs letter square border_black" maxlength="1" type="text" />
<input id="2" class="2 inputs letter square border_black" maxlength="1" type="text" />
<input id="3" class="3 inputs letter square border_black" maxlength="1" type="text" />
<input id="4" class="4 inputs letter square border_black" maxlength="1" type="text" />
<input id="5" class="5 inputs letter square border_black" maxlength="1" type="text" />
<input id="6" class="6 inputs letter square border_black" maxlength="1" type="text" />
<input id="7" class="7 inputs letter square border_black" maxlength="1" type="text" />
<!--Added executing javascript function named check()-->
<button id="continue" class="btn btn-primary" value="Continue" onClick="check()">Weiter</button>
</div>
<script>
//function definition
function check(){
//loop through the inputs using their numbers
for(var i = 1; i<7; ++i){
//check if the value is filled
if ($('#' + i).val()){
//do anything you want, here I alert the element id which is the number
alert(i);
//or change css
$($('#' + i).addClass('example');
$($('#' + i).removeClass('anotherexample');
}
}}</script>
<!--jquery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
添加了一些评论
答案 2 :(得分：0)
使用下面的代码检查是否使用jquery填充输入。
var isAllFilled = 0;
$(".answer_1 > input").each(function()
{
if($(this).val()!="")
{
isAllFilled++;
}
);
If(isAllFilled == $(".answer_1 > input").length)
{
//all fields are filled.
}
在此代码运行后的逻辑中，检查isAllFilled的值，该值告诉您是否所有字段都已填充。
答案 3 :(得分：0)
为每个输入添加<form>标记和name
<form method="post" name="Form" onsubmit="validateForm()" action="">
<div class="answer_1">
<input id="1" class="1 inputs letter square border_black" maxlength="1" type="text" name="first"/>
<input id="2" class="2 inputs letter square border_black" maxlength="1" type="text" name="second"/>
...
...
<button id="continue" class="btn btn-primary" value="Continue">Weiter</button>
</div>
</form>
function validateForm()
{
var a=document.forms["Form"]["first"].value;
var b=document.forms["Form"]["second"].value;
....
if (a==null || a=="" || b==null || b=="" ||...)
{
alert("Please Fill All Required Field");
return false;
}
}
答案 4 :(得分：0)
这是检查值是空还是填充的方法。
尝试使用.val() - function。
$(document).on("click", "#continue", function(e) {
e.preventDefault();
var emptyCounter = 0;
$(".answer_1 > input").each(function(index) {
if ($(this).val() == "") {
// Do something if it's empty or increase the counter
console.log("Empty");
emptyCounter = emptyCounter + 1;
} else {
// Do something if filled?
console.log("Filled");
}
});
if (emptyCounter == 0) {
// submit?
console.log("everything's good");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answer_1">
<input id="1" class="1 inputs letter square border_black" maxlength="1" type="text" />
<input id="2" class="2 inputs letter square border_black" maxlength="1" type="text" />
<input id="3" class="3 inputs letter square border_black" maxlength="1" type="text" />
<input id="4" class="4 inputs letter square border_black" maxlength="1" type="text" />
<input id="5" class="5 inputs letter square border_black" maxlength="1" type="text" />
<input id="6" class="6 inputs letter square border_black" maxlength="1" type="text" />
<input id="7" class="7 inputs letter square border_black" maxlength="1" type="text" />
<button id="continue" class="btn btn-primary" value="Continue">Weiter</button>
</div>