将按钮值添加到 For 循环中的所有文本框中

Question

我有一个简单的问题。我有一个带有 for 循环的表单。每个 for 循环都有一个文本框。我想要两个按钮，当我单击一个按钮时，所有文本框都会填充按钮中的值。例如，当我单击“添加 50 分钟”按钮时，我希望我的所有文本框都填充 50。如果我单击“添加 110 分钟”按钮也是如此（附屏幕截图）

这是我的表格

@using (Html.BeginForm("Index", "Minutes", FormMethod.Post, new { enctype = "multipart/form-date", onsubmit = "popup()" }))
{

    @Html.ValidationSummary(true)
    <fieldset>
        <div>
            <table id="tablereport" class="table table-striped table-bordered table-hover table-condensed">
                <thead style="background-color:black; font-weight:bold; color:aliceblue">
                    <tr>

                </thead>
                <tr>
                    <td><b>@Html.Label("Date :")</b></td>

                    <td>@Html.TextBox("datepicker", DateTime.Now.ToString("MM/dd/yyyy"), new { required = "required" })</td>

                </tr>
                <tr>
                    <td><input type="button" id="btnSetText" value="Add 50 Minutes" class="btn btn-default" onclick="setText" /></td>
                    <td><input type="button" value="Add 110 Minutes" class="btn btn-default" /></td>

                </tr>



            </table>
        </div>
        @if (ViewBag.Message != null)
        {
            <div id="dialog-message" title="Alert !!">
                <p>
                    <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
                    @ViewBag.Message
                </p>
            </div>
        }

        <table id="tablereport" class="table table-striped table-bordered table-hover table-condensed">
            <thead style="background-color:black; font-weight:bold; color:aliceblue">
                <tr>

            </thead>
            <tr>
                <th>Class ID</th>
                <th>Course Title</th>
                <th>Department</th>
                <th>SID</th>
                <th>Full Name</th>
                <th>Minutes</th>
            </tr>

            @for (var i = 0; i < Model.Count; i++)
            {

                <tr>

                    <td>
                        @Html.DisplayFor(model => model[i].ClassID)
                        @Html.HiddenFor(model => model[i].ClassID)
                    </td>
                    <td>
                        @Html.DisplayFor(model => model[i].CourseTitle)
                        @Html.HiddenFor(model => model[i].CourseTitle)
                    </td>
                    <td>
                        @Html.DisplayFor(model => model[i].Department)
                        @Html.HiddenFor(model => model[i].Department)
                    </td>
                    <td>
                        @Html.DisplayFor(model => model[i].SID)
                        @Html.HiddenFor(model => model[i].SID)
                    </td>
                    <td>
                        @Html.DisplayFor(model => model[i].FullName)
                        @Html.HiddenFor(model => model[i].FullName)
                    </td>
                    <td>
                        @Html.TextBoxFor(model => model[i].Minutes, new { @Value = "0" })
                        @Html.ValidationMessageFor(model => model[i].Minutes)
                    </td>

                </tr>

            }

        </table>

        <table align="center">
            <tr>
                <td><input type="submit" value="Save" class="btn btn-default" onclick="popup()" /></td>
            </tr>
        </table>

    </fieldset>
}

这是我的脚本

<script>

var date = new Date();
var maxdate = date.getDate();
//var currentDate = $(".selector").datepicker("getDate");
$(function () {
    $("#datepicker").datepicker({
        defaultDate: maxdate,
        minDate: '-1M',
        maxDate: '+0D'
    });
});

**function setText(){

  var setText = document.getElementById('setText');

  setText.value = '50';
}**

我的脚本正在运行，但只会填充一个文本框。

谢谢！！

Answer 1

您可以将所有文本框包装在一个 div 中，为所有文本框添加一个类，然后使用如下内容：
function setValue(value){ $('#divWithtextboxes .TextboxClass').each(function (i) { $(this).val(value); <br> });<br>

Answer 2

对于 DOM 中的每个元素，id 应该是唯一的。即使在您的情况下，有多个元素具有相同的 id，document.getElementById() 函数也会返回一个元素（第一个具有该 id 的元素）。您要做的是向每个文本框添加一个类，然后使用 document.getElementsByClassName() 它将返回具有该类的所有元素的列表。

例如：

$("#add-50").on('click', function() {
    // ill intentionally use vanilla js here
    var inputs = document.getElementsByClassName('textbox');

    for (var i = 0; i < inputs.length; i++) {
      var input1 = inputs[i];
      input1.value = '50';
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="add-50">Click Me for 50</button><br/>
  <input class="textbox" type="text" /><br/>
  <input class="textbox" type="text" /><br/>
  <input class="textbox" type="text" /><br/>
  <input class="textbox" type="text" /><br/>
  <input class="textbox" type="text" />
</div>