我正在为我和我的朋友做一个网站。主要功能是民意调查，询问谁更好。我将输入类型设置为无线电。我想知道我是否可以让民意调查使用我的自定义图像作为按钮，而不仅仅是我点击的圆圈。一个按钮有我的名字，另一个有我朋友的名字。
这是当前的代码：
<html>
<head>
<title>Home</title>
<meta name="author" content="My Name">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" rev="stylesheet" href="divs.css"
type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" rev="stylesheet" href="styles.css"
type="text/css" media="screen" charset="utf-8" />
<script>
function getVote(int) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll_vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="all"> <!-- Start All Div -->
<div id="header"> <!-- Start Header Div -->
<embed width="800" height="100px" src="../Media/Banner/banner.swf">
<embed width="800" height="50px" src="../Media/DD Menu/ddmenu3.swf">
</div> <!-- End Header Div -->
<div id="main"> <!-- Start Main Div -->
<div id="poll">
<h3>Me or Friend?</h3>
<form>
Me:
<input type="radio" name="vote" value="0" onclick="getVote(this.value)">
<br>
Friend:
<input type="radio" name="vote" value="1" onclick="getVote(this.value)">
</form>
</div>
</div> <!-- End Main Div -->
<div id="footer"> <!-- Start Footer Div -->
<p class="footer">© Copyright,
2014 - <script language="javascript" type="text/javascript">
var today = new Date()
var year = today.getFullYear()
document.write(year)
</script></p>
</div> <!-- End Footer Div -->
</div> <!-- End All Div -->
</body>
</html>
<?php
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0) {
$yes = $yes + 1;
}
if ($vote == 1) {
$no = $no + 1;
}
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>
当然，但它会使用 javascript。下面是一个使用 Jquery 的示例。请注意，输入无线电位于屏幕外，因此可以在不被用户看到的情况下进行设置。
.HTML
<p>Choice 1</p>
<img id="choice-1" class="button" src="path/to/img.png"/>
<input id="choice-1-input" type="radio" name="vote" value="0" style="position: absolute; left: -9999px" onclick="getVote(this.value)">
JavaScript with Jquery。根据要求包括上下文。
$(document).ready(function() {
$('#choice-1').click(function()
{
radiobtn = document.getElementById("#choice-1-input");
radiobtn.checked = true;
});
}