检查文本框的数量是否大于输入的文本框数组的数量

Question

我正在尝试将单个文本框值“ totalmarkstoall”的值与文本框的多个数组“ marksscored”进行比较，以下我的Java脚本也在按键功能上进行了比较。

无法执行的操作是，如果该文本框的“ marksscored”值大于“ totalmarkstoall”，则显示弹出窗口：但是也应该擦除该值或不允许输入。

 function scorecompare(idval) { var marksscored = idval; var totalmarkstoall = document.getElementById("totalmarkstoall").value; if (parseInt(marksscored) > parseInt(totalmarkstoall)) { alert("greater than Total Mrks"); } else { } } 

 <input id="totalmarkstoall" type="number" style="border: 1px solid #dbdbdb;" placeholder="Enter Total Marks"></input> <table> <tr> <td> <input type="text" name="marksscored[]" id="marksscored[0]" value="" onkeyup="scorecompare(this.value);"/> </td> </tr> <tr> <td> <input type="text" name="marksscored[]" id="marksscored[1]" value="" onkeyup="scorecompare(this.value);"/> </td> </tr> <tr> <td> <input type="text" name="marksscored[]" id="marksscored[2]" value="" onkeyup="scorecompare(this.value);"/> </td> </tr> </table> 

Answer 1

如果您执行这样的操作，您就会知道该值来自哪个输入字段。

HTML：

<table>
<tr>
    <td>
        marksscored Array of text box's
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="marksscored[]" id="marksscored[0]" value="" onkeyup="scorecompare(this);">
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="marksscored[]" id="marksscored[1]" value="" onkeyup="scorecompare(this);">
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="marksscored[]" id="marksscored[2]" value="" onkeyup="scorecompare(this);">
    </td>
</tr>

</table>

JS：

function scorecompare(idval) {
   var marksscored = idval;

   var totalmarkstoall = document.getElementById("totalmarkstoall").value;
   if (parseInt(marksscored.value) > parseInt(totalmarkstoall))

   {
    alert("greater then  Total Mrks");
   //do things with inputfield marksscored
   } else {

   }
 }

Answer 2

您可以使用jquery做类似的事情：

1. 在keyup计算所有文本字段的总和

2. 检查大于总计

3. 如果是这种情况，则警报并清除当前文本字段$(this).val("");

看小提琴

更新：

小提琴

Answer 3

尝试这个。 像这样使用keyUp事件。

 $( ".marksscored" ).keyup(function() { var marksscored = $(this).val(); var totalmarkstoall = document.getElementById("totalmarkstoall").value; if (parseInt(marksscored) > parseInt(totalmarkstoall)) { alert("greater then Total Mrks"); $(this).val(""); } else { // do something } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <input id="totalmarkstoall" type="number" STYLE=" border: 1px solid #dbdbdb;" placeholder="Enter Total Marks"></input> <table> <tr> <td> <input type="text" class="marksscored" name="marksscored[]" id="marksscored[0]" value="" /> </td> </tr> <tr> <td> <input type="text" class="marksscored" name="marksscored[]" id="marksscored[1]" value="" /> </td> </tr> <tr> <td> <input type="text" class="marksscored" name="marksscored[]" id="marksscored[2]" value="" /> </td> </tr> </table>