排除'全选'来自ajax调用的复选框

时间:2015-02-04 09:48:31

标签: javascript jquery ajax

我设法成功进行了ajax通话,但我现在想要的是排除'全选'复选框,因为我想如果我点击/检查它我正在进行另一个ajax调用。我猜这是因为当我检查它时,它会选择所有但是在一秒之后取消选择所有。

所以这是我的JS:

$(document).ready(function() {
    function loadData(data){
        $.ajax({
            url: "item/item_processing.php",
            type: "POST",
            async: true, 
            data: data,
            cache: false,
            success: function(data) {
                $('#results').html(data);
            },  
        });
    }
    var first_page = "'page': 1";
    loadData(first_page);

    $('input, select', $('#filter_list')).on('keyup change',function() {
        var page_num = $(this).attr('data-p');
        var order_by = $("#filter_list input[type='radio']:checked").val();
        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();
        var older_than = $('#older_than').val();
        var claimed_uncl = $('#claimed_uncl').val();
        var per_page = $('#per_page').val();
        var key_word = $('#key_word').val();
        var data = { 'page': page_num, 'from_date': from_date, 'to_date': to_date, 'older_than': older_than, 'claimed_uncl': claimed_uncl, 'per_page': per_page, 'key_word': key_word, 'order_by': order_by };

        loadData(data);

    });
    $(document).on('click','#pagination .page_num', function(){
        var page_num = $(this).attr('data-p');
        var order_by = $("#filter_list input[type='radio']:checked").val();
        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();
        var older_than = $('#older_than').val();
        var claimed_uncl = $('#claimed_uncl').val();
        var per_page = $('#per_page').val();
        var key_word = $('#key_word').val();
        var data = { 'page': page_num, 'from_date': from_date, 'to_date': to_date, 'older_than': older_than, 'claimed_uncl': claimed_uncl, 'per_page': per_page,'key_word': key_word, 'order_by': order_by };

        loadData(data);
    });
    $(document).on('click','#sorting .sorting', function(){
        var page_num = $(this).attr('data-p');
        var order_by = $("#filter_list input[type='radio']:checked").val();
        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();
        var older_than = $('#older_than').val();
        var claimed_uncl = $('#claimed_uncl').val();
        var per_page = $('#per_page').val();
        var key_word = $('#key_word').val();
        var data = { 'page': page_num, 'from_date': from_date, 'to_date': to_date, 'older_than': older_than, 'claimed_uncl': claimed_uncl, 'per_page': per_page,'key_word': key_word, 'order_by': order_by };

        loadData(data);
    });
});

和html:

<div class="item_table">
    <ul id="sorting">
        <li>
            <div class="cust_row_5 sorting" style="width: 3%;"><input type="checkbox" name="selected1" class="selected1" value="" id="select_all" /></div>
            <div class="cust_row_5 sorting">
                <strong>ID</strong>
                <label for="sort1" class="desc"><input type="radio" id="sort1" name="sort" class="sort_by" value="item_id desc" /></label>
                <label for="sort2" class="asc"><input type="radio" id="sort2" name="sort" class="sort_by" value="item_id asc" /></label>
            </div>
            <div class="cust_row_40 sorting">
                <strong>Description</strong>
                <label for="sort3" class="desc"><input type="radio" id="sort3" name="sort" class="sort_by" value="description desc" /></label>
                <label for="sort4" class="asc"><input type="radio" id="sort4" name="sort" class="sort_by" value="description asc" /></label>
            </div>
            <div class="cust_row_13 sorting">
                <strong>Date/Time</strong>
                <label for="sort5" class="desc"><input type="radio" id="sort5" name="sort" class="sort_by" value="date_found desc" /></label>
                <label for="sort6" class="asc"><input type="radio" id="sort6" name="sort" class="sort_by" value="date_found asc" /></label>
            </div>
            <div class="cust_row_30 sorting">
                <strong>Location Found</strong>
                <label for="sort7" class="desc"><input type="radio" id="sort7" name="sort" class="sort_by" value="location_found desc" /></label>
                <label for="sort8" class="asc"><input type="radio" id="sort8" name="sort" class="sort_by" value="location_found asc" /></label>
            </div>
            <div class="cust_row_10 sorting">
                <strong>User</strong>
                <label for="sort9" class="desc"><input type="radio" id="sort9" name="sort" class="sort_by" value="id desc" /></label>
                <label for="sort10" class="asc"><input type="radio" id="sort10" name="sort" class="sort_by" value="id asc" /></label>
            </div>
            <div class="cust_row_10 sorting" style="border: none; width: 10%;">
                <strong>Claimed</strong>
                <label for="sort11" class="desc"><input type="radio" id="sort11" name="sort" class="sort_by" value="returned desc" /></label>
                <label for="sort12" class="asc"><input type="radio" id="sort12" name="sort" class="sort_by" value="returned asc" /></label>
            </div>
        </li>
    </ul>
</div>

谢谢!

1 个答案:

答案 0 :(得分:0)

您可以为input添加一个过滤器,因为您只想绑定单选按钮的事件,而不是input[type=radio],而不是复选框。

$('input[type=radio], select', $('#filter_list')).on('keyup change',function() {
        var page_num = $(this).attr('data-p');
        var order_by = $("#filter_list input[type='radio']:checked").val();
        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();
        var older_than = $('#older_than').val();
        var claimed_uncl = $('#claimed_uncl').val();
        var per_page = $('#per_page').val();
        var key_word = $('#key_word').val();
        var data = { 'page': page_num, 'from_date': from_date, 'to_date': to_date, 'older_than': older_than, 'claimed_uncl': claimed_uncl, 'per_page': per_page, 'key_word': key_word, 'order_by': order_by };

        loadData(data);

    });

此外,您可以使用:not()选择器排除类selected1的复选框,请参阅下面的

 $('input:not(.selected1), select', $('#filter_list')).on('keyup change',function() {...

}