如何使用名称属性添加输入值？

Question

如何使用 jquery 添加带有 name 属性的输入值？我只得到第一个输入值。

<div class="col-md-12"><label>Question 1 </label></div>
<div class="col-md-12"><input class="form-control" type="text" name="faq-page1" id="faq-page1" placeholder="Question 1"></div>
<input type="hidden" name="faq_name" value="1">
<div class="col-md-12"><input class="form-control" type="url" name="faq-url1" id="faq-url1" placeholder="Answer 1"></div>
<div class="col-md-12"><label>Question 2</label></div>
<div class="col-md-12"><input class="form-control" type="text" name="faq-page2" id="faq-page2" placeholder="Question 2"></div>
<input type="hidden" name="faq_name" value="1">
<div class="col-md-12"><input class="form-control" type="url" name="faq-url2" id="faq-url2" placeholder="Answer 2"></div>

我试过了

var faq_name_value = $("input[name=faq_name]").val();

我实际上想添加所有隐藏的输入值。

Answer 1

我实际上想添加所有隐藏的输入值。

我建议使用以下选择器来获取所有 type="hidden" <input> 的：
^{有关更多信息，请查看：jQuery access input hidden value}

$("input[type=hidden]")

然后，我们可以使用.each()loop over元素：

Demo sn-p记录每个值：

$("input[type=hidden]").each((i, e) => {
    console.log(e.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12"><label>Question 1 </label></div>
<div class="col-md-12"><input class="form-control" type="text" name="faq-page1" id="faq-page1" placeholder="Question 1"></div>
<input type="hidden" name="faq_name" value="1">
<div class="col-md-12"><input class="form-control" type="url" name="faq-url1" id="faq-url1" placeholder="Answer 1"></div>
<div class="col-md-12"><label>Question 2</label></div>
<div class="col-md-12"><input class="form-control" type="text" name="faq-page2" id="faq-page2" placeholder="Question 2"></div>
<input type="hidden" name="faq_name" value="1">
<div class="col-md-12"><input class="form-control" type="url" name="faq-url2" id="faq-url2" placeholder="Answer 2"></div>

---

如果您想添加每个值，例如 1+1+5，我们需要添加更多检查以确保这些值是数字，以防止出现类似 1+1+abc 的情况。

我使用this 函数来检查“值”是否为数字。

Demo sn-p记录每个值的总和：

let total = 0;

$("input[type=hidden]").each((i, e) => {
    if (isNumeric(e.value)) {
        total += parseInt(e.value);
    }
});

console.log('Total: ', total);


// https://stackoverflow.com/questions/175739/built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number
function isNumeric(str) {
    if (typeof str != "string") return false 
    return !isNaN(str) && !isNaN(parseFloat(str));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12"><label>Question 1 </label></div>
<div class="col-md-12"><input class="form-control" type="text" name="faq-page1" id="faq-page1" placeholder="Question 1"></div>
<input type="hidden" name="faq_name" value="1">
<div class="col-md-12"><input class="form-control" type="url" name="faq-url1" id="faq-url1" placeholder="Answer 1"></div>
<div class="col-md-12"><label>Question 2</label></div>
<div class="col-md-12"><input class="form-control" type="text" name="faq-page2" id="faq-page2" placeholder="Question 2"></div>
<input type="hidden" name="faq_name" value="1">
<div class="col-md-12"><input class="form-control" type="url" name="faq-url2" id="faq-url2" placeholder="Answer 2"></div>
<input type="hidden" name="faq_name" value="abc15">