我有以下HTML代码:
<div class="elgg-sidebar">
<h3><b>Source: </b></h3>
<input type="checkbox" id="internship[source][]" name="internship[source][]" value="S1" checked=""> S1
<input type="checkbox" id="internship[source][]" name="internship[source][]" value="S2" checked=""> S2
<input type="checkbox" id="internship[source][]" name="internship[source][]" value="S3" checked=""> S3
<h3><b>Internship Type: </b></h3>
<input type="checkbox" id="internship[int_wrk_typ][]" name="internship[int_wrk_typ][]" value="WT1" checked=""> WT1
<input type="checkbox" id="internship[int_wrk_typ][]" name="internship[int_wrk_typ][]" value="WT2" checked=""> WT2
<input type="checkbox" id="internship[int_wrk_typ][]" name="internship[int_wrk_typ][]" value="WT3" checked=""> WT3
<h3><b>Location: </b></h3>
<select style="width:200px;padding: 5px;font-size: 1.1em;color: #666;border: 1px solid #ccc;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;" name="int_location" id="internship[int_location]">
<option value="%">Any</option>
<option value="Work from Home">Work from Home</option>
<option value="Loc1">Loc1</option>
<option value="Loc2">Loc2</option>
</select>
<h3><b>Dates: </b></h3>
Start Date:
<input value="" type="text" name="int_start" id="internship[int_start]" class="elgg-input-date popup_calendar" data-datepicker-opts="">
End Date:
<input value="" type="text" name="int_end" id="internship[int_end]" class="elgg-input-date popup_calendar" data-datepicker-opts="">
<h3><b>Keywords: </b></h3>
<input value="" type="text" name="keyword" id="internship[keyword]" class="elgg-input-text">
<input type="button" onclick="onClick_Search()" class="elgg-button elgg-button-submit" value="Search">
<input type="button" onclick="onClick_Reset()" class="elgg-button elgg-button-delete float-alt" value="Reset">
</div>现在,我想要获得上述所有输入,选择javascript函数中的参数。
我尝试了document.getElementById("internship").value和document.getElementById("internship[]").value,但是我无法获得参数。我甚至尝试使用document.getElementById("internship[source]").value和document.getElementById("internship[source][]").value获取单个参数,但仍然运气不佳。
有人能帮我处理这件事吗?
发布于 2017-07-18 12:09:13
您的元素获得相同的id和名称,因为您使用相同的字符串值来定义这个值。对多个元素使用相同的id是不好的,而应该使用类。然后,您可以使用document.getElementsByClassName()获得这些元素,这将返回一个nodeList,您将不得不对它进行迭代。
我已经通过使用类而不是id从代码中提取了一些元素的示例,这样您就可以使用它了。
var inputs = document.getElementsByClassName('internship[source][]');
for(var i=0; i<inputs.length; i++)
console.log(inputs[i].value); <input type="checkbox" class="internship[source][]" name="internship[source][]" value="S1" checked=""> S1
<input type="checkbox" class="internship[source][]" name="internship[source][]" value="S2" checked=""> S2
<input type="checkbox" class="internship[source][]" name="internship[source][]" value="S3" checked=""> S3
发布于 2017-07-18 12:11:06
我换了
实习来源
至
实习来源1]和实习来源和实习来源
它起作用了。
<div class="elgg-sidebar">
<h3><b>Source: </b></h3>
<input type="checkbox" id="internship[source][1]" name="internship[source][]" value="S1" checked=""> S1
<input type="checkbox" id="internship[source][2]" name="internship[source][]" value="S2" checked=""> S2
<input type="checkbox" id="internship[source][3]" name="internship[source][]" value="S3" checked=""> S3
<h3><b>Internship Type: </b></h3>
<input type="checkbox" id="internship[int_wrk_typ][]" name="internship[int_wrk_typ][]" value="WT1" checked=""> WT1
<input type="checkbox" id="internship[int_wrk_typ][]" name="internship[int_wrk_typ][]" value="WT2" checked=""> WT2
<input type="checkbox" id="internship[int_wrk_typ][]" name="internship[int_wrk_typ][]" value="WT3" checked=""> WT3
<h3><b>Location: </b></h3>
<select style="width:200px;padding: 5px;font-size: 1.1em;color: #666;border: 1px solid #ccc;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;" name="int_location"
id="internship[int_location]">
<option value="%">Any</option>
<option value="Work from Home">Work from Home</option>
<option value="Loc1">Loc1</option>
<option value="Loc2">Loc2</option>
</select>
<h3><b>Dates: </b></h3> Start Date:
<input value="" type="text" name="int_start" id="internship[int_start]" class="elgg-input-date popup_calendar" data-datepicker-opts=""> End Date:
<input value="" type="text" name="int_end" id="internship[int_end]" class="elgg-input-date popup_calendar" data-datepicker-opts="">
<h3><b>Keywords: </b></h3>
<input value="" type="text" name="keyword" id="internship[keyword]" class="elgg-input-text">
<input type="button" onclick="onClick_Search()" class="elgg-button elgg-button-submit" value="Search">
<input type="button" onclick="onClick_Reset()" class="elgg-button elgg-button-delete float-alt" value="Reset">
</div>
alert(document.getElementById("internship[source][1]").value);JSFiddle:https://jsfiddle.net/xvae47tw/
发布于 2017-07-18 12:12:32
尝尝这个,
$(document).ready(function(){
var elements = $('*[id^="internship"]'); // get all inputs starts with internship
$.each(elements, function( index, element ) { // loop over it
console.log( index + ": " + element.value ); // element.value gives the values one by one
});
});或者,您可以将所有值推入数组中。
$(document).ready(function(){
var elements = $('*[id^="internship"]').map(function() {
return $(this).attr("value");
}).get().join();
alert(elements);
});工作示例
希望能帮上忙
https://stackoverflow.com/questions/45166121
复制相似问题