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>
>

Изображение диаграммы

Jquery, чтобы найти флажок и выполнить определенный URL

jquery html spring

02.10.2018 17:40

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

если вы хотите установить все флажки и зарегистрировать прослушиватель событий для каждого из них, вы должны использовать ...

$('input[type=checkbox']).on('ifChanged', function () {
    //... do whatever
    // $(this) is a reference to the jQuery object denoting the clicked checkbox
});

кроме этого, вы устанавливаете идентификатор для каждого флажка равным 1! это не сработает, поскольку идентификаторы должны быть уникальными. чтобы различать одиночные кликабельные флажки, которые будут выполнять какое-то действие из первого флажка с идентификатором '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
});

02.10.2018 18:27

Ответ принят как подходящий

Вы можете добавить класс в свой флажок и добавить ниже метод для получения 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>

Вы также можете протестировать его здесь ..

Спасибо, Нимит Шах, это то, что мне было нужно! Есть ли способ открыть этот URL-адрес в новой вкладке или в новом окне?

— 02.10.2018 20:19

Спасибо! Я смог понять это.

— 02.10.2018 21:57

02.10.2018 19:22