更改类中的所有输入字段的一个输入字段

Question

我有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 - name，那么我想将t1 - id，t1 - perDate和t1 - email的类改为'required'，并且保持t2和t3的所有其他类不变。我想知道是否有人可以用正确的方向指向我，并使用某种JavaScript代码来实现这一点。感谢所有的帮助，如果需要更多信息，请询问。

Answer 1

因此，当您将“名称”输入模糊化时，如果提供名称，则需要相邻的输入。但也不要忘了做，如果他们回去他们并不需要，并决定清除名称字段像这样：

$('.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'); 
}); 

Answer 2

如果你使用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'); 
    } 
}); 

Answer 3

<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在粘贴领域很有用。