Ajax调用复选框 [英] Ajax call on checking a checkbox

问题描述

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

I am having a two checkboxes.Now on click of one of the checkbox I want to make an ajax call to a jsp page.That jsp page is to show a table that contains datat being fetched from database.

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

Now,The problem is say i have two checkboxes like :

<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');
                }
            });

            }
      });

      });

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

But how to show the table on the same page ?

推荐答案

你必须稍微改变你的html -

you have to change your html slightly with this--

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

give same class name to both check boxes.

<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部分略有变化 -

Now slightly change in jquery part--

$('.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');
                }
            });

            }
      });

这篇关于Ajax调用复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！