使用div作为单选按钮

Question

如何使用div单选按钮？

我的意思是 :

• 你可以选择一个div然后它是蓝色边框
• 你只能选择其中一个

Answer 1

如果你想要一个CSS Only解决方案,这是一个很好的解决方案:

.labl {
    display : block;
    width: 400px;
}
.labl > input{ /* HIDE RADIO */
    visibility: hidden; /* Makes input not-clickable */
    position: absolute; /* Remove input from document flow */
}
.labl > input + div{ /* DIV STYLES */
    cursor:pointer;
    border:2px solid transparent;
}
.labl > input:checked + div{ /* (RADIO CHECKED) DIV STYLES */
    background-color: #ffd6bb;
    border: 1px solid #ff6600;
}

<label class="labl">
    <input type="radio" name="radioname" value="one_value" checked="checked"/>
    <div>Small</div>
</label>
<label class="labl">
    <input type="radio" name="radioname" value="another" />
    <div>Small</div>
</label>

灵感来自这个答案

Answer 2

是的,你可以使用'div'作为单选按钮,它将作为单选按钮组使用.但为此你需要Javascript.我使用JQuery为它创建了一个脚本.这是源 -

$('.radio-group .radio').click(function(){
    $(this).parent().find('.radio').removeClass('selected');
    $(this).addClass('selected');
    var val = $(this).attr('data-value');
    //alert(val);
    $(this).parent().find('input').val(val);
});

.radio-group{
    position: relative;
}

.radio{
    display:inline-block;
    width:15px;
    height: 15px;
    border-radius: 100%;
    background-color:lightblue;
    border: 2px solid lightblue;
    cursor:pointer;
    margin: 2px 0; 
}

.radio.selected{
    border-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Select an option (You will get it's value displayed in the text input field!)</h2>
<form method="post" action="send.php">
  <div class="radio-group">
      <div class='radio' data-value="One"></div>1
      <div class='radio' data-value="Two"></div>2
      <div class='radio' data-value="Three"></div>3
      <br/>
      <input type="text" id="radio-value" name="radio-value" />
  </div>
  
</form>