Question

我创建了两个单选按钮。单选按钮具有背景图像。一张已选中且一张未经检查的图片。我使用CSS来回改变图像。

两个单选按钮都有值。我正在尝试在选中时获取每个单选按钮的值。我可以不用JavaScript吗？如果没有，我怎样才能在选中时获得单选按钮的值？

    var yesImg = document.getElementById('radio_one'); 
    var noImg = document.getElementById('radio_two');

    if (yesImg.src.match('http://icons.iconarchive.com/icons/icojam/blueberry-basic/32/radio-button-on-icon.png')) {
    
        console.log(document.getElementById('find_val').value);
    }
    else if (noImg.src.match('http://icons.iconarchive.com/icons/icojam/blueberry-basic/32/radio-button-on-icon.png')) {

        console.log(document.getElementById('find_val').value);
    }

input[type="radio"] {
  display: none;
  
}

input[type="radio"]+label {
  background-image: url('http://icons.iconarchive.com/icons/icojam/blueberry-basic/32/radio-button-off-icon.png');
  background-repeat: no-repeat;
  display: inline-block;
  cursor: pointer;
  padding-bottom: 15px;
 
}

input[type="radio"]:checked+label {
  background-image: url('http://icons.iconarchive.com/icons/icojam/blueberry-basic/32/radio-button-on-icon.png');
}

.lbl-style{
   padding-left:30px;
   padding-top:8px;
}

<span >                                       
 <input type="radio" id="radio_one" value="1" name="number" class="rdo-style"/>
 <label for="radio_one" class="lbl-style" >Value 1</label>
</span>



<span >
 <input type="radio" id="radio_two" value="2" name="number" class="rdo-style"/>
 <label for="radio_two" class="lbl-style" >Value 2</label>
</span>

<input type="hidden" id="find_val" name="number" />

使用背景图像获取单选按钮的值

0 个答案: