"X" check box with an input box

Question

I am attempting to create a check box with an X instead of a check using an input box. However, some I want to work as a radio button (when you click one, the other's get "un-checked").

Basically, a group of three check boxes that only allows 1 box to have the check in it at a time.

Does anyone know an easy way to accomplish the radio button-esq approach to this without creating a specific function for each group of check box's?

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

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

Check out this fiddle and let me know if this is what you're talking about. http://jsfiddle.net/Agony/Dqnk5/3/ Edit: As in, you can check and uncheck each of the grouped checkboxes. — usernolongerregistered, Oct 25 '13 at 18:53
Might be a starting point http://stackoverflow.com/questions/4697941/jquery-make-checkboxes-act-like-radio-buttons — CDspace, Oct 25 '13 at 18:54
@Agony not quite. Basically, a group of three `check boxes` that only allows 1 box to have the check in it at a time. — bryan, Oct 25 '13 at 18:55
Well I would love to help with this question, but my jsFiddle is being a real jsButt right now :\ Anyone else having jsTrouble? — usernolongerregistered, Oct 25 '13 at 19:06
@Agony: jsfiddle is down it seems... I'm still wondering... Wouldnt it make more sense to use radio buttons instead of checkboxes? — Giovanni Silveira, Oct 25 '13 at 19:12
jsFiddle works for me. But @GiovanniSilveira it would make more sense but I want it to be an X inside of a box. I am actually using an `input` right now to act like a check box. — bryan, Oct 25 '13 at 19:14
So you just need to style the radio button accordingly. Wouldnt that be easier? — Giovanni Silveira, Oct 25 '13 at 19:19
@GiovanniSilveira yeaaa I guess you are right. Although there are some groups where I want it to act like check box's. Should I then just style checkbox/radio interchangabley? — bryan, Oct 25 '13 at 19:25
And how well does styling in css work in lower versions of IE? — bryan, Oct 25 '13 at 19:44
That would depend on the version... Not sure :) http://jsfiddle.net/FYGYL/ Try that on your browsers and see what you get — Giovanni Silveira, Oct 25 '13 at 19:52
well, seems like `appearence` property is only supported in webkit and moz, so that wouldnt work for IE. You would probably need to hide the input and show something else in there, like a `label`, `span`, `div`, and style accordingly — Giovanni Silveira, Oct 25 '13 at 19:57

The Alpha · Answer 1 · 2013-10-25T19:26:33.213

You can use custom radio buttons (css only) that looks like checkbox (Demo on jsBin and 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>

binboavetonik · Answer 2 · 2013-10-25T19:23:26.010

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');
});

Giovanni Silveira · Answer 3 · 2013-10-25T20:43:19.703

For a pure CSS solution (that actually validates), you could use something like:

<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>

And this is the CSS for it:

.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;
}

Note that this will still look a bit weird in the html side of it, but at least its valid markup.

Check how that displays on older versions of IE. It works fine on IE10.

Fiddle

score 0 · Accepted Answer · answered Oct 25 '13 at 20:48

Thanks for everyone's help! I've taken everyone's advice and decided to use a custom image radio/check box through css.

This method will not work for IE7/8 because of the :checked attribute but all you need to do is use selectivizr and everything should run smoothly.

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');
}

"X" check box with an input box

4 Answers4