我对此并不陌生,几个月前我才刚刚开始学习如何进行网络编程。我在创建jQuery时遇到问题,因此当单击复选框时,它将格式化并执行url。
因此,根据单击的复选框的不同,URL总是不同的。例如,如果您看下面的图片,并且选中前三个,则网址为
http://myspc.sc.ti.com/index.jsp?facility=DP1DM5&chart=EQ-ENASLA&chart=CL-NNT10KS&chart=CL-NNTPATS
如果选中了另一个图表,则需要将&chart=CHARTNAME
放置在最后一个&chart=
之后的url中
这是标准URL格式:http://myspc.sc.ti.com/index.jsp?facility=DP1DM5&chart=
CHARTNAME
我使用 ${lot.chart}
那么有人可以帮我这个jQuery吗?预先谢谢你。
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="table-responsive table-responsive-data2">
<table class="table table-data2">
<thead>
<tr>
<th><label class="au-checkbox"> <input type="checkbox" id="selectAll"> <span class="au-checkmark"></span> </label></th>
<th>Chart</th>
<th>Top Lower</th>
<th>Top Upper</th>
<th>Bot Lower</th>
<th>Bot Upper</th>
<th>Resonse Spec</th>
</tr>
</thead>
<tbody>
<tr class="${status.count%2==0 ? 'tbl5' : 'tbl6'}">
<c:forEach items="${lots}" var="lot" varStatus="status">
<<tr class="spacer"></tr>
<tr class="tr-shadow">
<td><label class="au-checkbox"> <input type="checkbox" id="1"> <span class="au-checkmark"></span></label></td>
<td class="status--processs"><a href= "http://myspc.sc.ti.com/index.jsp?facility=DP1DM5&chart=${lot.chart}" style="color: #000066" >${lot.chart} </a></td>
<td><span class="status--process">${lot.topLower}</span></td>
<td><span class="block-email">${lot.topUpper}</span></td>
<td class="title-4">${lot.botLower}</td>
<td class="desc">${lot.botUpper}</td>
<td class="desc"><a href= http://smsweb.sc.ti.com/SpecReports/AppServlet?action=getParagraphDetail&jspURL=reportParagraphDetail.jsp&facility=DP1DM5¶graphId=${lot.responseSec}>${lot.responseSec}</a></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#selectAll').click(function (e) {
$(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
});
$('checked-selector'.click (function(){
window.location='url?chart=' + $ (this).val();
}));
$
</script>
</body>
>
图表图片
答案 0 :(得分:0)
您可以将类添加到您的复选框,并添加以下方法以获取URL。我已经向所有复选框添加了“复选框选择器”类。
$('#selectAll').click(function (e) {
$(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
checkboxCheck();
});
$('.checkbox-selector').on("change", checkboxCheck);
function checkboxCheck(){
var url = "url?";
$('.checkbox-selector:checked').each(function(){
url+= "chart=" +$(this).closest("tr").find("a").first().text()+"&";
})
$("#url").text(url); // You can change the URL here..
}
我正在添加带有虚拟数据的代码段,以便更好地理解。当您取消选中复选框(从网址中删除名称)时,这也将为您提供帮助。
$('#selectAll').click(function (e) {
$(this).closest('table').find('td input:checkbox').prop('checked', this.checked);
checkboxCheck();
});
$('.checkbox-selector').on("change", checkboxCheck);
function checkboxCheck(){
var url = "url?";
$('.checkbox-selector:checked').each(function(){
url+= "chart=" +$(this).closest("tr").find("a").first().text()+"&";
})
$("#url").text(url);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="table-responsive table-responsive-data2">
<table class="table table-data2">
<thead>
<tr>
<th><label class="au-checkbox"> <input type="checkbox" id="selectAll"> <span class="au-checkmark"></span> </label></th>
<th>Chart</th>
<th>Top Lower</th>
<th>Top Upper</th>
<th>Bot Lower</th>
<th>Bot Upper</th>
<th>Resonse Spec</th>
</tr>
</thead>
<tbody>
<tr class="${status.count%2==0 ? 'tbl5' : 'tbl6'}">
<tr class="spacer"></tr>
<tr class="tr-shadow">
<td><label class="au-checkbox"> <input type="checkbox" id="1" class="checkbox-selector"> <span class="au-checkmark"></span></label></td>
<td class="status--processs"><a href= "http://myspc.sc.ti.com/index.jsp?facility=DP1DM5&chart=${lot.chart}" style="color: #000066" >a1</a></td>
<td><span class="status--process">lot.topLower 1</span></td>
<td><span class="block-email">lot.topUpper 1</span></td>
<td class="title-4">lot.botLower 1</td>
<td class="desc">lot.botUpper 1</td>
<td class="desc"><a href= http://smsweb.sc.ti.com/SpecReports/AppServlet?action=getParagraphDetail&jspURL=reportParagraphDetail.jsp&facility=DP1DM5¶graphId=${lot.responseSec}>lot.responseSec 1</a></td>
</tr>
<tr class="${status.count%2==0 ? 'tbl5' : 'tbl6'}">
<tr class="spacer"></tr>
<tr class="tr-shadow">
<td><label class="au-checkbox"> <input type="checkbox" id="2" class="checkbox-selector"> <span class="au-checkmark"></span></label></td>
<td class="status--processs"><a href= "http://myspc.sc.ti.com/index.jsp?facility=DP1DM5&chart=${lot.chart}" style="color: #000066" >a2</a></td>
<td><span class="status--process">lot.topLower 2</span></td>
<td><span class="block-email">lot.topUpper 2</span></td>
<td class="title-4">lot.botLower 2</td>
<td class="desc">lot.botUpper 2</td>
<td class="desc"><a href= http://smsweb.sc.ti.com/SpecReports/AppServlet?action=getParagraphDetail&jspURL=reportParagraphDetail.jsp&facility=DP1DM5¶graphId=${lot.responseSec}>lot.responseSec 2</a></td>
</tr>
<tr class="${status.count%2==0 ? 'tbl5' : 'tbl6'}">
<tr class="spacer"></tr>
<tr class="tr-shadow">
<td><label class="au-checkbox"> <input type="checkbox" id="3" class="checkbox-selector"> <span class="au-checkmark"></span></label></td>
<td class="status--processs"><a href= "http://myspc.sc.ti.com/index.jsp?facility=DP1DM5&chart=${lot.chart}" style="color: #000066" >a3</a></td>
<td><span class="status--process">lot.topLower 3</span></td>
<td><span class="block-email">topUpper 3</span></td>
<td class="title-4">lot.botLower 3</td>
<td class="desc">lot.botUpper 3</td>
<td class="desc"><a href= http://smsweb.sc.ti.com/SpecReports/AppServlet?action=getParagraphDetail&jspURL=reportParagraphDetail.jsp&facility=DP1DM5¶graphId=${lot.responseSec}>lot.responseSec 3</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br/><br/>
<div id="url">
</div>
您也可以here对其进行测试。.
答案 1 :(得分:-1)
如果您想选择所有复选框并为每个事件使用changelist注册一个事件侦听器,则必须使用...
$('input[type=checkbox']).on('ifChanged', function () {
//... do whatever
// $(this) is a reference to the jQuery object denoting the clicked checkbox
});
除此之外,您还可以将每个复选框的ID设置为1!由于ID必须是唯一的,因此无法使用。区分将要执行操作的单个可单击复选框与ID为'selectAll'的第一个复选框的区别,我将向其添加一个CSS类:
<input type="checkbox" class="action-checkbox">
并以这种方式访问它们:
$('input.action-checkbox).on('click', function () {
//... do whatever
// $(this) is a reference to the jQuery object denoting the clicked checkbox
});