Need a radio button to behave and look like a checkbox

[schwim]

Hi there everyone!

I’ve got a form that utilizes checkboxes for information bound to multiple rows and I’m using PHP to make arrays with the necessary information. The issue I have is that if the checkboxes are not checked, it messes up the array count for the checkboxes and they no longer related to the row that was intended.

My thought is that I could use radio buttons instead but the issue I have here is that I can’t fit radio buttons in the form. My next thought was that it would be perfect if I could make a radio button look like a checkbox. If I check it it’s name=radio value=1 and if I uncheck that box it’s radio value=0.

I’ve done a ton of searching and I’m finding solutions in which you have to click different checkboxes to change the value of the same named element: http://jsfiddle.net/mq8Zq/

I need to be able to uncheck the checkbox to change the value of the particular element.

Is this possible? I would be happy to share code if necessary but I think in this case I’m asking a general enough question that it wouldn’t be helpful.

Thanks for your time!

[WebMachine]

Could you not do that with your PHP code behind the scenes? If I understand correctly what you are wanting, try checking whether or not the checkbox is checked. If it is, fine - then use its value (1). If it is not checked, then assign the value of 0 to the checkbox when you process the form.

[DaveMaxwell]

You could do something like this - you would just need to size it appropriately for your needs. (note - you’ll have to “edit” the code pen to see it in action - the onebox here is disabling it for some reason)

Disclaimer - I had this saved in my notes for a later use from cssdeck, but their lab pages are having dns issues, so I copied this over to a codepen and reduced the size down.

[schwim]

Dave, thanks so much for that. I think I’ve managed to squish it down some but have a question. Where does the form element get placed? I have a working on/off style switch but I don’t understand where I would pass this data on via the form.

[coothead]

Hi there schwim,

check out the attachment, which includes radio
buttons cunningly disguised as check boxes.

schwim.zip (4.8 KB)

coothead

[ronpat]

Nice job, Mr. C, but, @schwim, the non-standard/unexpected visual feedback is confusing. Checkboxes that behave like radio buttons???

[Mittineague]

I’m confused as well. I think the problem hinges on the “if no checkboxes are checked”.
i.e. only checked checkboxes are sent along in the POST array.

Using radio buttons can “force” a value to be sent.

IMHO this approach to a solution feels like the wrong way to do it and that form validation that required a value would be better.

[schwim]

Thank you all very much for your assistance!

To explain better, here’s a demo form of what I want to do:

<input  type='text' name='name[]'>
<input type='text' name='value[]'>
<input type='checkbox' name='active[]'>
<br>
<input  type='text' name='name[]'>
<input type='text' name='value[]'>
<input type='checkbox' name='active[]'>
<br>
<input  type='text' name='name[]'>
<input type='text' name='value[]'>
<input type='checkbox' name='active[]'>

and on the PHP side, it builds an array, binding the elements together for me which I can loop through on the processing side.

$i = 0;
WHILE(ISSET($_POST['name'][$i])){
    
    $name = $_POST['name'][$i];
    // Do important stuff
    $i = ++$i;

}

but with checkboxes, if it’s not checked, it doesn’t exist in the array, so if I check the first row’s box and third row’s box, I will get a checked box on the first and second row, since PHP doesn’t know that the unchecked box deserved a spot in the array.

This could be easily resolved with radio buttons, since it sends a value, regardless of which you use:

<input  type='text' name='name[]'>
<input type='text' name='value[]'>
<input type='radio' name='active[]' value='1'>
<input type='radio' name='active[]' value='0'>
<br>
<input  type='text' name='name[]'>
<input type='text' name='value[]'>
<input type='radio' name='active[]' value='1'>
<input type='radio' name='active[]' value='0'>
<br>
<input  type='text' name='name[]'>
<input type='text' name='value[]'>
<input type='radio' name='active[]' value='1'>
<input type='radio' name='active[]' value='0'>

but I don’t have room to fit the radio buttons(My actual rows utilize three checkboxes, so the differing real estate used by the two is sizeable)

In my code, I deal with this array 6 times on three different pages, both with PHP and with jquery, allowing me to reorder, add to and delete rows. It’s got a lot of use in my script. I could either rewrite all of the PHP and javascript across all the pages to not work with the genius of a PHP array…

Or I could make a radio button look like a checkbox.

This is why I’m trying to do this. Above, I posted the codepen of a visual representation of something that could work but I don’t know how to turn that div into a form element that will give me a 0 or 1, depending on it’s setting.

Just let me know if I’ve still managed to miss the important bits