jQuery查找复选框并执行某个URL

时间:2018-10-02 15:40:49

标签: jquery html spring

我对此并不陌生,几个月前我才刚刚开始学习如何进行网络编程。我在创建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&paragraphId=${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>
>

图表图片

enter image description here

2 个答案:

答案 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&paragraphId=${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&paragraphId=${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&paragraphId=${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
});