Ajax调用复选框

一尘不染

Ajax调用复选框

jsp

我有两个复选框，现在单击其中一个复选框，我想对jsp页面进行ajax调用。该jsp页面将显示一个包含从数据库中获取数据的表。

现在，问题是说我有两个复选框，如：

<div class="search-inputs">

        <input class="searchName" type="text" placeholder="Search Here.."></input>

        <input class="searchType1" type="checkbox" name="emailNotification"><label class="searchtype1label">Email Notification</label></input>
        <input class="searchType2" type="checkbox" name="SharingNotification"><label class="searchtype2label">File Sharing Notification</label></input>


        <input class="searchDateFrom" type="text" placeholder="Search From"></input>
        <input class="searchDateTo" type="text" placeholder="Search To"></input>
        <input class="Datesubmit" type="button" value="Search"></input>
        <div id="container"></div>

怎么办？请帮忙

My Script part :

$(document).ready(function () {

            $('.search-select').on('change', function(){
            $('.search-inputs').children().hide();
            var classn =$(this).find(":selected").val();
            //alert(classn);
            if(classn=='searchName')
                {
                    //alert("searchname");
                    $('.'+"searchName").show();
                }
                else if(classn=='searchType')
                {
                    //alert("searchType");
                    $('.'+"searchType1").show();
                    $('.'+"searchtype1label").show();
                    $('.'+"searchType2").show();
                    $('.'+"searchtype2label").show();
                }
                else if(classn=='searchDate'){
                    //alert("searchType");
                    $('.'+"searchDateFrom").show();
                    $('.'+"searchDateTo").show();
                    $('.'+"Datesubmit").show();
                }

            });

            $('#emailNotification').on('change',function() {
            //var checked = $(this).is(':checked');
            if(this.checked){

            //alert("in");
            $.ajax({
                type: "POST",
                url: "searchOnType.jsp",
                data: {mydata: "emailNotification"},
                success: function(data) {
                    alert('it worked');
                    $('#container').html(data);
                },
                 error: function() {
                    alert('it broke');
                },
                complete: function() {
                    alert('it completed');
                }
            });

            }
      });

      });

但是如何在同一页面上显示表格？

阅读 261

2020-06-10

共1个答案

一尘不染

您必须以此来稍微更改html-

为两个复选框提供相同的类名。

<input class="searchType" type="checkbox" name="emailNotification" id="emailNotification"><label class="searchtype1label">Email Notification</label></input>
 <input class="searchType" type="checkbox" name="SharingNotification" id="SharingNotification"><label class="searchtype2label">File Sharing Notification</label></input>

现在，jQuery部分稍有变化-

$('.searchType').click(function() {
    alert($(this).attr('id'));  //-->this will alert id of checked checkbox.
       if(this.checked){
            $.ajax({
                type: "POST",
                url: 'searchOnType.jsp',
                data: $(this).attr('id'), //--> send id of checked checkbox on other page
                success: function(data) {
                    alert('it worked');
                    alert(data);
                    $('#container').html(data);
                },
                 error: function() {
                    alert('it broke');
                },
                complete: function() {
                    alert('it completed');
                }
            });

            }
      });

2020-06-10