带有输入框的“X”复选框

我正在尝试使用X而不是使用输入框进行检查来创建复选框。然而，有些我想作为一个单选按钮来工作（当你点击一个按钮时，另一个按钮被取消选中）。带有输入框的“X”复选框

基本上，一组三个check boxes，一次只允许1盒中有检查。

有没有人知道一个简单的方法来完成这个单选按钮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"; 
}

来源

2013-10-25 bryan

看看这个小提琴，让我知道，如果这是你在说什么。 http://jsfiddle.net/Agony/Dqnk5/3/编辑：如在，你可以检查和取消选中每个分组复选框。 – usernolongerregistered

可能是一个起点http://stackoverflow.com/questions/4697941/jquery-make-checkboxes-act-like-radio-buttons – CDspace

@Agony不完全。基本上，一组三个“复选框”只允许一个盒子一次进行检查。 – bryan

感谢大家的帮助！我已经采取了每个人的建议，并决定通过CSS使用自定义图像收音机/复选框。

由于:checked属性，此方法不适用于IE7/8，但您只需使用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-25 20:48:54 bryan

你可以给无线电集团的已识别例如“radio”，onclick重置它们并设置点击的值。 jQuery的样品将

<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-25 19:17:43 binboavetonik

可以使用自定义单选按钮（css only），看起来像checkbox（Demo on jsBin和Demo on jsFiddle）

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-25 19:19:15

这是否适用于ie7/8？ – bryan

''真的吗？这听起来像对我无效的标记... –

对于纯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上工作正常。

Fiddle

来源

2013-10-25 20:27:14

带有输入框的“X”复选框

回答

相关问题