时间戳

首页 > 解决方案 > Jquery查找复选框并执行某个URL

jquery - Jquery查找复选框并执行某个URL

问题描述

我是新手，几个月前我才开始学习如何进行网络编程。我在创建 jQuery 时遇到问题，因此当单击复选框时，它将格式化并执行 url。

因此，根据单击的复选框，url 总是会有所不同。例如，如果您查看下面的图片并且如果前三个被选中，则 url 将是

http://myspc.sc.ti.com/index.jsp?facility=DP1DM5&chart=EQ-ENASLA&chart=CL-NNT10KS&chart=CL-NNTPATS

如果选中另一个图表，则需要将其放在&chart=CHARTNAME最后一个之后的 url 中&chart=

这是标准 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>
>

图表图片

在此处输入图像描述

标签： jqueryhtmlspring

解决方案

您可以将类添加到您的复选框并添加以下方法以获取 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..
}

为了更好地理解，我正在添加带有虚拟数据的片段。当您取消选择复选框（从 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);
    }
<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>

你也可以在这里测试它..

推荐阅读