在这个页面http://317.masud-rana.com/apartments/中,我放了一个名为"选择全部"的复选框。在底部自动检查所有其他复选框。使用以下代码,它可能有我想要的但标记图标不显示。我怎么能解决它?
$(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"
});
}
});
});
修改:以下是Google地图的代码
<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
以下是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);
答案 0 :(得分:1)
只需在每个复选框上触发点击事件,如果尚未选中复选框。取消选中全选复选框时,撤消操作。
$('#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();
}
});
}
});