Question

我想只使用单选按钮进行投票。我用下面的代码运行它。

<html>
<head>
<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="poll">
<h3>Do you like PHP and AJAX so far?</h3>
<form>
<input type="radio" name="vote" value="0" onclick="getVote(this.value)">
<label>+<label>
<br>
<input type="radio" name="vote" value="1" onclick="getVote(this.value)">
<label>-<label>
</form>
</div>

</body>
</html>

但问题是如何用图像或文本替换收音机，如+和 - ，在谷歌中看到几种方式，我可以改变带有图像或文本的单选按钮的样式，但最终点亮收音机中存在的所以它不起作用

任何人都可以帮助我吗？

谢谢

Answer 1

您可以使用onclick为图像简化，并为＆＃39; plus＆＃39;传递1。＆＃39;减去＆＃39;

为-1

＆＃13;

function getVote(vote) {
    if(vote == 1){
        alert('you voted up');
    }
    else{
        alert('you voted down');
    }
}

＆＃13;

img{
    width:50px;
}

＆＃13;

<div id="poll">
<h3>Do you like PHP and AJAX so far?</h3>
    <img onclick="getVote(1)" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/plus-.png" />
    <img onclick="getVote(0)" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRFArejAZiRfXrGQqRxw0RpelEfLBdSzCdM01pGi6bdvHYz7HEi"  />
</div>

＆＃13;

Answer 2

<form>
<input id="0" type="radio" name="vote" value="0" onclick="getVote(this.value)">
<label for="0">+<label>
<br>
<input id="1" type="radio" name="vote" value="1" onclick="getVote(this.value)">
<label for="1">-<label>
</form>

在标签标签中，您可以放置任何内容或图片或文字。只需单击标签的内容，就像单击radio0或radio1。

Answer 3

使用CSS设置标签样式。将其与for属性相关联。如果您想要图像，请在标签中添加图像或使用bg图像。

input[type=radio] {
  display: none
}
input[type=radio] + label {
  color: #CCC;
  font-weight: bold;
  display: inline-block;
  width: 20px;
  height:20px;
  border: 1px solid black;
  text-align: center;
}
input[type=radio]:checked + label {
  color: #0F0;
}

<input type="radio" id="plus" name="vote" value="0">
<label for="plus">+<label>
<br>
<input type="radio" id="neg" name="vote" value="1">
<label for="neg">-<label>

如何使用图像或文本更改单选按钮以及如何使用onclick

3 个答案: