Question

我在html网站上有4个图像，只有两个可见。竖起大拇指向下。我有javascript代码，我希望用户只能选择其中一种可能性。如果用户向上或向下点击拇指，则会获得颜色。但我的脚本允许用户选择两种可能性。

enter image description here

我想要这个

Html代码：

<body>
<img id="myImage" onclick="changeImage()" src="../Image/kleindownglow.jpg">
<img id="myImage2" onclick="changeImage2()" src="../Image/kleinupglow.png">
</body>

脚本

function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("glow")) {
        image.src = "../Image/kleindown.jpg";
    } else {
        image.src = "../Image/kleindownglow.jpg";
    }
}
function changeImage2() {
    var image2 = document.getElementById('myImage2');
    if (image2.src.match("upglow")) {
        image2.src = "../Image/kleinup.png";
    } else {
        image2.src = "../Image/kleinupglow.png";
    }
}

感谢您的帮助

Answer 1

<强> HTML

<p>
    <input type="checkbox" id="test1" />
    <label for="test1">Red</label>
</p>

<强> CSS

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;    
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left:0; top: 2px;
  width: 24px; height: 24px;
  border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 3px;

}
[type="checkbox"]:not(:checked) + label:before
{
      background-image: url('https://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Bad%20mark.png'); 

}
[type="checkbox"]:checked + label:before
{    
    background-image: url('https://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_18.gif') !important;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  position: absolute;
  top: 0; left: 4px;
  font-size: 14px;
  color: #09ad7e;
  transition: all .2s;

}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 1px dotted blue;
}

/* hover style just for information */
label:hover:before {
  border: 1px solid #4778d9!important;
}

<强> JQuery的

$("input[type='checkbox']").change(function(){
    var checkedSt=$(this).prop('checked');
    alert(checkedSt ? "Like" : "UnLike");
});

DEMO

不确定添加

DEMO

Answer 2

这是解决您的问题的JSBin：http://jsbin.com/fiwadinosemi/1/edit

它的作用：

如果两者都未被选中并按下其中一个 - 按下的项目会闪烁
如果有一个项目被点亮并按下它 - 它只会消除发光效果
如果有一个项目发光并且您按下另一个项目 - 另一个项目会发光而旧项目会被发光

因此，这是向上/向下投票按钮的正常行为

Answer 3

如果要使代码正常工作，则需要在代码中添加对相对图像的引用，并将该图像设置为未选择的版本。

如果我这样做，它将是带有精灵和单选按钮的纯CSS。

<强> HTML：

<input type="radio" name="vote1" class="vote" id="down1" value="down" /><label for="down1"></label>
<input type="radio" name="vote1" class="vote" id="up1" value="up" /><label for="up1"></label>
<hr/>
<input type="radio" name="vote1" class="vote" id="down2" value="down" /><label for="down2"></label>
<input type="radio" name="vote1" class="vote" id="up2" value="up" /><label for="up2"></label>

<强> CSS：

.vote { display: none; }

.vote + label {
    display: inline-block;
    width:55px; 
    height:65px;
    background-image: url(http://i.imgur.com/oRg1EVq.png);
}

.vote[value="up"] + label {
    background-position: 55px 66px;
}
.vote[value="up"]:checked + label {
    background-position: 55px 0px;
}

.vote[value="down"] + label {
    background-position: 0px 66px;
}
.vote[value="down"]:checked + label {
    background-position: 0px 0px;
}

图片：

Imgur

<强>小提琴：

http://jsfiddle.net/coL4LhtL/

让我们使用javascript从两个中选择一个图像

3 个答案:

DEMO

不确定添加

DEMO