更改類中的所有輸入字段的一個輸入字段

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在粘貼領域很有用。