Ajax调用检查复选框

Ajax call on checking a checkbox

本文关键字：复选框检查调用 Ajax 更新时间：2023-09-26

我有两个复选框。现在，单击其中一个复选框，我想对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');
                }
            });
            }
      });
      });

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

你必须用这个来稍微更改你的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');
                }
            });
            }
      });

您必须使用change事件，如下所示：

Html:

<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>
<div id="container">
</div>

JQuery:

$('#emailNotification').on('change',function() {
            if(this.checked){
            $.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');
                }
            });
            }
      });