javascript - 为隐藏的输入 onclick 赋值

Question

出于设计原因，我想要一个 <li>在选择要查看的内容时单击(发布表单以查看数据)，所以我在其中放置了一些隐藏的输入，我想知道我是否可以通过 onclick 为单击的隐藏输入提供一个值，然后 var getVal = Request.Form["clickedInput"];像这样在我的 AJAX 页面上获取值，这意味着它会在发布时发送值，因为它也会在点击时发布。

但我只希望被点击的那个得到值，如果我点击另一个选项卡在<li>我希望第一个然后删除它的值，然后现在单击输入来获取一个值？合理？

这是我的表单代码，包括 <li> .

        <form method="post" action="~/AJAXcalls/repinintAJAX.cshtml" name="form">
            <div class="reportDateDiv">

                <a class="blackColor fSize18 RPtxt">Reporting Period</a>

                <input type="text" name="inputDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
                       onchange="mySubmit(this.form)" value="@inputDate" autocomplete="off" placeholder="@placeholderStartDate.ToString("MMM d, yyyy")" readonly="readonly" />

                <a class="blackColor fSize16 RPtxt RPtxtTo">to</a>

                <input type="text" name="endDate" spellcheck="false" class="datepicker metricDateTextbox capitalFirst"
                       onchange="mySubmit(this.form)" value="@endDate" autocomplete="off" placeholder="@noEndDate.ToString("MMM d, yyyy")" readonly="readonly" />

                <select name="NormOrAvg" class="dwmViewSelect" onchange="mySubmit(this.form)">
                    <option selected=@(Request.Form["NormOrAvg"] == "1") value="1">Rep Per Set</option>
                    <option selected=@(Request.Form["NormOrAvg"] == "2") value="2">Average Rep Per Set</option>
                </select>
            </div>
            <div class="holdLiftMenu">
                <ul class="holdLiftMenuUL">
                    <li class="holdLiftMenuLI">
                        <a class="holdLiftMenuA total current">Total
                            <input type="hidden" name="hid4" id="hid4" value="" />
                        </a>
                    </li>
                    <li class="holdLiftMenuLI">
                        <a class="holdLiftMenuA squat">Squat
                            <input type="hidden" name="hid1" id="hid1" value="" />
                        </a>
                    </li>
                    <li class="holdLiftMenuLI">
                        <a class="holdLiftMenuA benchpress">Benchpress
                            <input type="hidden" name="hid2" id="hid2" value="" />
                        </a>
                    </li>
                    <li class="holdLiftMenuLI">
                        <a class="holdLiftMenuA deadlift">Deadlift
                            <input type="hidden" name="hid3" id="hid3" value="" />
                        </a>
                    </li>
                </ul>
            </div>
        </form>

这是我链接到 <li> 的代码，到目前为止，它只是隐藏/显示我的 div，但如果可能的话，我还希望在同一次点击时发生值分配/删除？

        $(document).ready(function () {
            $(".total").click(function () {
                $("#piechart").show();
                $("#piechartS").hide();
                $("#piechartB").hide();
                $("#piechartD").hide();
            });
            $(".squat").click(function () {
                $("#piechart").hide();
                $("#piechartS").show();
                $("#piechartB").hide();
                $("#piechartD").hide();
            });
            $(".benchpress").click(function () {
                $("#piechart").hide();
                $("#piechartS").hide();
                $("#piechartB").show();
                $("#piechartD").hide();
            });
            $(".deadlift").click(function () {
                $("#piechart").hide();
                $("#piechartS").hide();
                $("#piechartB").hide();
                $("#piechartD").show();
            });
        });

我绝不擅长 js 或 jquery，但我猜必须对脚本代码进行一些更改，因为目前点击功能链接到 a 标签类而不是输入，但我会如果可能的话，请在这里提供一些帮助。

我使用的是 cshtml 而不是 MVC!

Answer 1

jQuery 文档是您的 friend :http://api.jquery.com/val/

val() 函数可以通过以下方式使用:

var hiddenvalue = $("input[name=hid1]").val(); // returns input value
$("input[name=hid1]").val("NewVal"); // sets input value

只需将$("input[name=hid1]").val("NewVal");放在click()触发的匿名函数的末尾即可;

$(".total").click(function () {
    $("#piechart").show()
    $("#piechartS").hide();
    $("#piechartB").hide();
    $("#piechartD").hide();
    $("input[name=hid1]").val("NewVal");
});