0

我正在尝试使用 X 创建一个复选框，而不是使用输入框创建一个复选框。但是，有些我想用作单选按钮（当您单击一个时，另一个会“未选中”）。

基本上，一组三个check boxes，一次只允许一个盒子检查它。

有谁知道一种简单的方法来完成单选按钮-esq 方法，而无需为每组复选框创建特定功能？

HTML

<input name="box1" id="box1" class="checkBox" value="" readonly="readonly" onclick="return checkBox('box1')">

CSS

.checkBox { background-color:#fff; margin: 0; border: 0; padding: 0; border:1px    solid #000; text-align: center; cursor: default;font-family: 'Arial Narrow', Arial, sans-serif;font-size:11px;font-weight:bold;width:1.1em;height:1.1em; }

功能

function checkBox(box) {
   x = document.getElementById(box).value;
   document.getElementById(box).value = (x == "X") ? "" : "X";
}
4

4 回答 4

1

您可以使用css only看起来像checkbox（jsBin 上的 Demo和 jsFiddle 上的 Demo ）的自定义单选按钮 ( )

CSS：

div.radios > label > input {
    visibility: hidden;
}

div.radios > label {
    display: inline-block;
    margin: 0 0 0 -10px;
    padding: 0 0 10px 0;  
    height: 20px;
    cursor:pointer;
}

div.radios > label > img {
    display: inline-block;
    padding: 0px;
    height:20px;
    width:20px;
    background: none;
    vertical-align:top;
}

div.radios > label > input:checked +img {  
   background: url(https://cdn2.iconfinder.com/data/icons/picons-essentials/71/no-24.png);
   background-repeat: no-repeat;
   background-position:center center;
   background-size:20px 20px;
}

HTML：

<div class='radios'>
    <label title="item1">
        <input type="radio" name="foo" value="0" /> <img /> Radio One
    </label>

    <label title="item2">
        <input type="radio" name="foo" value="1" /> <img /> Radio Two
    </label>
</div>
于 2013-10-25T19:19:15.747 回答
0

You can give the radio group an identifier class, for instance "radio" and onclick reset them and set val of the clicked one. A jquery sample would be 

<input class="checkBox radio" value="" readonly="readonly">
<input  class="checkBox radio" value="" readonly="readonly">
<input class="checkBox radio" value="" readonly="readonly">

$(".radio").click(function() {
    $(".radio").val('');
    $(this).val('X');
});
于 2013-10-25T19:17:43.113 回答
0

对于纯 CSS 解决方案（实际验证），您可以使用以下内容：

<input id="rd1" type="radio" name="opt" /><label for="rd1"></label>
<input id="rd2" type="radio" name="opt" /><label for="rd2"></label>
<input id="rd3" type="radio" name="opt" /><label for="rd3"></label>

这是它的CSS：

.radio-special {
    display: none;
}
.radio-special + label {
    background: #ddd;
    height:24px;
    width: 24px;
    box-shadow: inset 0 0 2px 2px #aaa;
    display: inline-block;
}
.radio-special:checked + label {
    background: url('https://cdn1.iconfinder.com/data/icons/30_Free_Black_ToolBar_Icons/20/Black_Remove.png') #ddd no-repeat 2px 2px;
}

请注意，这在它的 html 端看起来仍然有点奇怪，但至少它是有效的标记。

检查它在旧版本的 IE 上的显示方式。它在 IE10 上运行良好。

小提琴

于 2013-10-25T20:27:14.577 回答
0

感谢大家的帮助！我听取了大家的建议，并决定通过 css 使用自定义图像单选框/复选框。

由于该属性，此方法不适用于 IE7/8，:checked但您需要做的就是使用selectivizr，一切都应该运行顺利。

HTML

<input id="option_1" name="option1" type="radio">
<label for="option_1">Option 1</label>

<input id="option_2" name="option2" type="radio">
<label for="option_2">Option 2</label>

<input id="option_3" name="option3" type="radio">
<label for="option_3">Option 3</label>

CSS

input[type='checkbox'], input[type='radio'] { opacity: 0; float: left; width: 14px; }

input[type='radio'] + label, input[type='checkbox'] + label {
   margin: 0;
   margin-right:-10px; /* Position between the box+label */
   clear: none;
   padding: 1px 1px 1px 20px; /* Position of the box+label */
   cursor: pointer;
   background: url('emptyBox.png') left center no-repeat;
   float:left;
}

input[type='radio']:checked + label, input[type='checkbox']:checked + label  {    
   background-image: url('selectedBox.png');
}
于 2013-10-25T20:48:54.280 回答