选中所有带有Google Maps标记复选框的复选框

Question

In this page http://317.masud-rana.com/apartments/ , I have put a checkbox named "Select All" at bottom that automatically checks all the other checkboxes. Using following code, its possible to have what I want but marker icons are not displaying. How could I fix it?

$(document).ready(function () {
    $('#selecctall').click(function (event) { //on click 
        if (this.checked) { // check select status
            $('.glemps-ckbx').each(function () { //loop through each checkbox
                this.checked = true; //select all checkboxes with class "checkbox1"               
            });
        } else {
            $('.glemps-ckbx').each(function () { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                       
            });
        }
    });
});

Edit: Here is the code of the Google Maps

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places">

</script>
<link rel="stylesheet" href="../wp-content/themes/317linden/css/mapstyle.css" />
<div id="MapWrapper" class="googleMap"></div>
<div id="MapItemHolder">
    <table>
        <tr>
            <td>
                <input type="checkbox" id="bank" class="glemps-ckbx" value="Banks" onclick="neighbourhood('bank');" />Banks / ATms
            </td>
            <td>
                <input type="checkbox" id="art_gallery" class="glemps-ckbx checkbox1" value="Music" onclick="neighbourhood('art_gallery');" />Arts / Music
            </td>
            <td>
                <input type="checkbox" id="park" class="glemps-ckbx checkbox1" value="Parks" onclick="neighbourhood('park');" />Parks
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="food-bar" class="glemps-ckbx" value="Bars" onclick="neighbourhood('food-bar');" />Good Eats / Bars
            </td>
            <td>
                <input type="checkbox" id="gas_station" class="glemps-ckbx" value="Gas" onclick="neighbourhood('gas_station');" />Gas Stations
            </td>
            <td>
                <input type="checkbox" id="grocery_or_supermarket" class="glemps-ckbx" value="Grocery Stores " onclick="neighbourhood('grocery_or_supermarket');" />Grocery Stores
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="university" class="glemps-ckbx" value="Universities" onclick="neighbourhood('university');" />Universities
            </td>
            <td>
                <input type="checkbox" id="bus_station-train_station" class="glemps-ckbx" value="Transportation" onclick="neighbourhood('bus_station-train_station');" />Public Transportation
            </td>
            <td>
                <input type="checkbox" id="parking" class="glemps-ckbx" value="Parking" onclick="neighbourhood('parking');" />Parking Garages
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="hospital" class="glemps-ckbx" value="Hospitals" onclick="neighbourhood('hospital');" />Hospitals
            </td>
            <td>
                <input type="checkbox" id="shopping_mall-clothing_store" class="glemps-ckbx" value="Shopping" onclick="neighbourhood('shopping_mall-clothing_store');" />Shopping / Retail
            </td>
            <td>
                <input type="checkbox" id="restaurant" class="glemps-ckbx" value="Hotels" onclick="neighbourhood('restaurant');" />Hotels
            </td>
        </tr>
    </table>
</div>
<script src="http://317.masud-rana.com/wp-content/themes/317linden/js/map.js"></script>
<input type="checkbox" id="selecctall" />Selecct All

Here is the code in map.js

var map;
var infowindow;
var bank = [],
    bar = [],
    univ = [],
    hosp = [],
    park = [],
    parking = [];
var gas = [];
var grocery = [];
var museum = [];
var restaurant = [];
var shopping = [];
var transit = [];
var center_infowindow;
var center = new google.maps.LatLng(41.408488, -75.660492);

function initialize() {
    map = new google.maps.Map(document.getElementById('MapWrapper'), {
        panControl: false,
        streetViewControl: false,
        zoomControl: false,
        center: center,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var center_marker = new google.maps.Marker({
        position: center,
        map: map,
        icon: '../wp-content/themes/317linden/images/map-icon1.png'
    });

    google.maps.event.addListener(center_marker, 'click', function () {

        center_infowindow = new google.maps.InfoWindow({
            position: center,
            map: map,
            content: "<a href='http://www.savoyeaddison.com/'>Savoye</a><br>3850 Vitruvian         Way<br>Addison,  TX  75001<br>(888) 904-4695"
        });
    });

}

function neighbourhood(type) {
    console.log(type);
    if ($('#' + type).is(':checked')) {
        ++n;
        var type_split = type.split('-');
        for (var k = 0; k < type_split.length; k++) {
            var request = {
                location: center,
                radius: 1200,
                types: [type_split[k]]
            };
            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);
        }
    } else {
        --n;
        var x;
        switch (type) {
            case 'bank':
                for (var x in bank) {
                    bank[x].setMap(null);
                }
                break;
            case 'food-bar':
                for (var x in bar) {
                    bar[x].setMap(null);
                }
                break;
            case 'gas_station':
                for (var x in gas) {
                    gas[x].setMap(null);
                }
                break;
            case 'grocery_or_supermarket':
                for (var x in grocery) {
                    grocery[x].setMap(null);
                }
                break;
            case 'art_gallery':
                for (var x in museum) {
                    museum[x].setMap(null);
                }
                break;
            case 'restaurant':
                for (var x in restaurant) {
                    restaurant[x].setMap(null);
                }
                break;
            case 'shopping_mall-clothing_store':
                for (var x in shopping) {
                    shopping[x].setMap(null);
                }
                break;
            case 'bus_station-train_station':
                for (var x in transit) {
                    transit[x].setMap(null);
                }
                break;
            case 'park':
                for (var x in park) {
                    park[x].setMap(null);
                }
                break;
            case 'parking':
                for (var x in parking) {
                    parking[x].setMap(null);
                }
                break;
            case 'university':
                for (var x in univ) {
                    univ[x].setMap(null);
                }
                break;
            case 'university':
                for (var x in univ) {
                    univ[x].setMap(null);
                }
                break;
            case 'hospital':
                for (var x in hosp) {
                    hosp[x].setMap(null);
                }
                break;
        }
    }

    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                createMarker(results[i], type);
            }
        }
    }
}

var marker;
var n = 0;

function createMarker(place, type) {
    console.log(n);
    var placeLoc = place.geometry.location;
    marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        icon: '../wp-content/themes/317linden/images/hotspot' + n + '.png'
    });

    google.maps.event.addListener(marker, 'click', function () {
        console.log(place);
        infowindow.setContent(place.name + "<br>" + place.vicinity);
        infowindow.open(map, this);
    });
    switch (type) {
        case 'bank':
            bank.push(marker);
            break;
        case 'gas_station':
            gas.push(marker);
            break;
        case 'grocery_or_supermarket':
            grocery.push(marker);
            break;
        case 'museum':
            museum.push(marker);
            break;
        case 'restaurant':
            restaurant.push(marker);
            break;
        case 'shopping_mall-clothing_store':
            shopping.push(marker);
            break;
        case 'bus_station-train_station':
            transit.push(marker);
            break;
        case 'hospital':
            hosp.push(marker);
            break;
        case 'parking':
            parking.push(marker);
            break;
        case 'park':
            park.push(marker);
            break;
        case 'university':
            univ.push(marker);
            break;
        case 'food-bar':
            bar.push(marker);
            break;
        case 'art_gallery':
            museum.push(marker);
            break;
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

Just trigger a click event on each checkbox, if the checkbox is not yet checked . Reverse the operation when you uncheck the select all checkbox.

$('#selecctall').click(function () {
    if (this.checked) { 
        $('.glemps-ckbx').each(function () {
            // check if not already checked...
            if (!this.checked) {
                this.click();
            }
        });
    } else {
        $('.glemps-ckbx').each(function () {
            if (this.checked) {
                this.click();
            }
        });
    }
});