如果输入了一个输入字段，则更改所有输入字段的类

Changing class of all input fields if one input field is entered

本文关键字：输入 字段 如果 一个      更新时间：2023-09-26

我有一个包含 3 个表格的页面：

<table id="t1">
  <tr>
    <td></td><td><input type="text" name="name" /></td>
    <td></td><td><input type="text" name="id" /></td>
    <td></td><td><input type="text" name="perDate" /></td>
    <td></td><td><input type="text" name="email" /></td>
  </tr>
</table>
<table id="t2">
  <tr>
    <td></td><td><input type="text" name="lostFound"  /></td>
    <td></td><td><input type="text" name="lostDate" /></td>
    <td></td><td><input type="text" name="item" /></td>
  </tr>
</table>
<table id="t3">
  <tr>
    <td></td><td><input type="text" name="check" /></td>
    <td></td><td><input type="text" name="reason" /></td>
    <td></td><td><input type="text" name="chkDate" /></td>
  </tr>
</table>

因此，我有一个验证脚本，如果我只是将类更改为"必需"，那么它将使该输入字段成为必需的。 我遇到的问题是....如果填写了该表中的另一个字段，我只想要求一个字段，否则该字段不是必需的。 例如：如果填写了 t1 - 名称，那么我想将 t1 - id、t1 - perDate 和 t1 - 电子邮件的类更改为"必需"，并将 t2 和 t3 的所有其他类保留不变。 我想知道是否有人可以用某种 JavaScript 代码为我指出正确的方向，这将使这成为可能。 感谢您的所有帮助，如果需要更多信息，请询问。

因此，当您模糊出"名称"输入时，如果相邻输入提供了名称，则需要相邻输入。 但是，如果他们返回并决定像这样清除该名称字段，也不要忘记使它们不需要：

$('.t1 input[name=name]').blur(function(){
    var $depends = $('.t1 input[name=id], .t1 input[name=perDate], .t1 input[name=email]');
    if($(this).val() != "")
        $depends.addClass('required');
    else
        $depends.removeClass('required');
});

此外，如果尝试在任何控件具有数据时更改必需属性，则应执行以下操作：

//blur even on each input in t1
$('.t1 input').blur(function(){
    //store as variable
    var $t1in = $('.t1 input');
    var hasData = false;
    //check all inputs and if one has data, set variable and exit
    $t1in.each(function(){
        if($(this).val().length > 0){
            hasData = true;
            //exit loop
            return false;
        }
    });
    //if any of the controls has data
    if(hasData)
        $t1in.addClass('required');
    else
        $t1in.removeClass('required');
});

如果你使用 jQuery 或任何其他 JS 库，你可以很容易地做这样的事情：

$('#t1 input[name=name]').change(function()
{
    var dependents = $('#t1 input[name=id],
                        #t1 input[name=perDate],
                        #t1 input[name=email]');
    if (this.value.length > 0)
    {
        dependents.addClass('required');
    }
    else
    {
        dependents.removeClass('required');
    }
});

<style>
.required { border:2px solid red }
</style>
<script>
function checkFilled(field) {
    var fields = field.parentNode.parentNode.getElementsByTagName('input');
    for (i = 0; i < fields.length; i++) {
        fields[i].className = field.value != '' ? 'required' : '';
    }
}
</script>
<table id="t1">
  <tr>
    <td></td><td><input type="text" name="name" onkeydown="checkFilled(this)" onkeyup="checkFilled(this)" onchange="checkFilled(this)" /></td>
    <td></td><td><input type="text" name="id" /></td>
    <td></td><td><input type="text" name="perDate" /></td>
    <td></td><td><input type="text" name="email" /></td>
  </tr>
</table>
<table id="t2">
  <tr>
    <td></td><td><input type="text" name="lostFound" onkeydown="checkFilled(this)" onkeyup="checkFilled(this)" onchange="checkFilled(this)" /></td>
    <td></td><td><input type="text" name="lostDate" /></td>
    <td></td><td><input type="text" name="item" /></td>
  </tr>
</table>
<table id="t3">
  <tr>
    <td></td><td><input type="text" name="check" onkeydown="checkFilled(this)" onkeyup="checkFilled(this)" onchange="checkFilled(this)" /></td>
    <td></td><td><input type="text" name="reason" /></td>
    <td></td><td><input type="text" name="chkDate" /></td>
  </tr>
</table>

添加所有onkeydown、onkeyup和onchange很有用。 onchange对于在字段中粘贴很有用。

相关文章：