StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Altered jQuery to simply pull the text from the label and add it to the dynamically appended div.</p> <p><strong>EDIT:</strong> I realize your if/else statement for the checked state was pointless since it wasn't altering anything at all based upon condition. You may have other plans for it, but based on the posted example, you could do away with the first portion of the jQuery entirely. I've made a small edit to the jquery code below.</p> <pre><code> $("input[name='domain_ext']").each(function() { var lbl = $(this).parent("label").text(); if ($(this).prop('checked')) { $(this).hide(); $(this).after("<div class='radioButtonOn'>" + lbl + "</div>"); // something else here if radio is checked?? } else { $(this).hide(); $(this).after("<div class='radioButtonOff'>" + lbl + "</div>"); } }); </code></pre> <p>Added a span to the label HTML to hide the text.</p> <pre><code><label> <input type="radio" name="domain_ext" value="all" /> <span>All</span></label> </code></pre> <p>Changed CSS to allow hover state to work and hide label text.</p> <pre><code>.radioButtonOff { width: 60px; height: 20px; color: #fff; background: #333333;} .radioButtonOff:hover, .radiobuttonOn:hover { width: 60px; color: #fff;height: 20px; background: #00a;} .radioButtonOn { width: 60px; height: 20px; color: #fff;background: #a00;} label span { display: none;} </code></pre> <p><a href="http://jsfiddle.net/NotInUse/4QZED/9/" rel="nofollow"><strong>Updated fiddle here</strong></a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload