帶有輸入框的「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」複選框

回答

相關問題