使用单选按钮更改函数中的参数

Question

我一直在学习 Creating a Store Locator with PHP, MySQL & Google Maps 教程。该教程的作者使用 <select> 半径值下拉列表进行搜索。而不是这个列表，我想要一系列单选按钮，以及与之关联的搜索半径选项。

我有按钮，但它们的行为方式与我预期的不同 - 当我单击它。（第一个按钮的半径值正在传递给函数 ok。）

我假设函数的第一部分是 clearLocations()，这意味着 radiusSelect 的任何值都将被删除并替换为单选按钮中的新数字。

有人可以告诉我我需要在哪里寻找才能完成这项工作吗？

谢谢

函数的

Javascript：

function searchLocationsNear(center) {
     clearLocations();

     var radius = document.getElementById('radiusSelect').value;
     var searchUrl = 'xml_output.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
     downloadUrl(searchUrl, function(data) {
       var xml = parseXml(data);
       var markerNodes = xml.documentElement.getElementsByTagName("marker");
       var bounds = new google.maps.LatLngBounds();
       for (var i = 0; i < markerNodes.length; i++) {
         var name = markerNodes[i].getAttribute("name");
         var address = markerNodes[i].getAttribute("address2");
         var distance = parseFloat(markerNodes[i].getAttribute("distance"));
         var latlng = new google.maps.LatLng(
              parseFloat(markerNodes[i].getAttribute("lat")),
              parseFloat(markerNodes[i].getAttribute("lng")));

         createOption(name, distance, i);
         createMarker(latlng, name, address);
         bounds.extend(latlng);
       }
       map.fitBounds(bounds);
       locationSelect.style.visibility = "visible";
       locationSelect.onchange = function() {
         var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
         google.maps.event.trigger(markers[markerNum], 'click');
       };
      });
    }

搜索区域html：

<body>
<div class="container">
        <input type="text" id="addressInput" size="10"/>
        <label class="radio-inline"><input type="radio" name="radio" id="radiusSelect" value="1">1 miles</label>
        <label class="radio-inline"><input type="radio" name="radio" id="radiusSelect" value="10">10 miles</label>
        <label class="radio-inline"><input type="radio" name="radio" id="radiusSelect" value="30">30 miles</label>
        <input type="button" class="btn btn-default" onclick="searchLocations()" value="Search"/>
</div>

</body>

Answer 1

ID 必须是唯一的，但您多次使用相同的 ID radiusSelect
你必须遍历所有按钮，检查当前按钮的 checked-属性是否为真，当它确实设置 radius 为 value按钮：

 var radius = ( function(n,r){
                  var b=document.getElementsByName(n);
                  for(var i=0;i<b.length;++i){
                    if(b[i].checked)return b[i].value;
                  }
                  return r;
                }
                ( 'radio',//name of the buttons
                  1//default-radius
                ));

使用单选按钮更改函数中的参数

Using radio button to change parameter in a function

html

php

mysql

radio-button

google-maps-api-3