Html替换单选按钮文本

本文介绍了Html替换单选按钮文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想用Google地图显示一个单选按钮。有没有办法使用谷歌地图而不是单选按钮的字符串。

我可以显示Google地图和单选按钮。

但是，我不知道如何用google地图替换单选按钮文本。你能帮我么？

HTML代码

 < ！DOCTYPE html> 
< html> 
< head> 
< meta name =viewportcontent =inital-scale = 1.0，user-scalable = no/> 
< script src =http://maps.googleapis.com/maps/api/js?&sensor=false>< / script> 
 
< script> 
函数initialize（）{
 
 var fenway = new google.maps.LatLng（48.1391265,11.580186300000037）; 
 
 var mapOptions = {
 zoom：10，
 center：fenway，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
 
} ; 
 
 var map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）; 
 
} 
< / script> 
< / head> 
 
< body onload =initialize（）> 
< div id =map_canvasstyle =width：500px; height：500px>< / div> 
 
 
< form> 
< input type =radioname =Avalue =c1> 1< br> 
< input type =radioname =Bvalue =c2> 2 
< / form> 
 
< / body> 
< / html>

解决方案

Radiobuttons本身没有显示文字。您可以使用标签将可点击的内容与单选按钮相关联，如下所示：

 < input type =radioname = fooid =foo1/>< label for =foo1> Foo＃1< / label>

所以，如果你想让文本以外的东西成为可点击的东西，只需更换文本，在你的情况下，一个Google Maps小部件。

 < input type =radioname =fooid =foo1/> 
< label for =foo1> 
< div id =map_canvasstyle =width：300px; height：200px>< / div> 
< / label>

编辑：
没有看到您的CSS，一些东西沿着这个地方：

  label 
 {
 display：block; 
}

所以试试这个：

 < input type =radioname =fooid =foo1/> 
< label for =foo1style =display：inline;> 
< div id =map_canvasstyle =width：300px; height：200px>< / div> 
< / label>

I wanna show a radio button with a Google maps. Is there a way to use Google maps instead of a string for radio buttons.

I can show Google maps and a radio button.

But, i don't know how to replace radio button text with the google maps. Can you please help me?

HTML code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="inital-scale=1.0 , user-scalable=no" />
 <script src="http://maps.googleapis.com/maps/api/js?&sensor=false"></script>

        <script >
        function initialize() {

            var fenway = new google.maps.LatLng(48.1391265, 11.580186300000037);

            var mapOptions = {
                zoom: 10,
                center: fenway,
                mapTypeId: google.maps.MapTypeId.ROADMAP

            };

            var map= new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

        }
    </script>
</head>

<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 500px"></div>


<form>
<input type="radio" name="A" value="c1">1<br>
<input type="radio" name="B" value="c2">2
</form>

</body>
</html>

解决方案

Radiobuttons themselves do not have display text. You use a label to associate something clickable with a radiobutton, like so:

<input type="radio" name="foo" id="foo1" /><label for="foo1">Foo #1</label>

So, if you want to have something other than text be the "something clickable," simply replace the text with, in your case, a Google Maps widget.

<input type="radio" name="foo" id="foo1" />
<label for="foo1">
    <div id="map_canvas" style="width: 300px; height: 200px"></div>
</label>

EDIT:Without seeing your CSS, you likely have something along the lines of this somewhere:

label
{
    display:block;
}

So try this:

<input type="radio" name="foo" id="foo1" />
<label for="foo1" style="display:inline;">
    <div id="map_canvas" style="width: 300px; height: 200px"></div>
</label>

这篇关于Html替换单选按钮文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！