StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You should have both <code><input></code>s be of different names and IDs and create a new radio for each "false" state; then bind a Javascript listener to the <code>onClick</code> event - using jQuery:</p> <h2>Code</h2> <pre class="lang-html prettyprint-override"><code><input type="radio" name="radio1" id="radio1" value="1"> R1 <input type="radio" name="radio1" id="radio1_2" value="0" style="display: none"> <input type="radio" name="radio2" id="radio2" value="1"> R2 <input type="radio" name="radio2" id="radio2_2" value="0" style="display: none"> </code></pre> <pre class="lang-js prettyprint-override"><code>$("#radio1").click(function() { $("#radio2").prop("checked", false); $("#radio2_2").prop("checked", true); }); $("#radio2").click(function () { $("#radio1").prop("checked", false); $("#radio1_2").prop("checked", true); }); </code></pre> <h2>Explanation</h2> <p>You set each of the two radios a different name; thus, each pertains to a different group. You must have a different radio for the false-like value of each input (its style was set to hidden, since the two radio groups should look like they're a single one). There is a problem: <strong>if you check one, the other won't be unchecked. Help!</strong></p> <p><strong>But you want only one of them to be checked at a time</strong>. The Javascript/jQuery function deals with that as follows:</p> <ul> <li>If <strong>#radio1</strong> is clicked (and thus checked), <strong>#radio2</strong> must be unchecked;</li> <li>It then checks the hidden button from the <em>radio2</em> group, that is, <strong>#radio2_2</strong>;</li> <li>The reverse happens if <strong>#radio2</strong> is clicked (<strong>#radio1</strong> is unchecked and <strong>#radio1_2</strong>, checked).</li> </ul> <p>This is an elegant (albeit arguably hacky) solution to what you want to do. It could work if the hidden radios' types was <code>hidden</code> instead of <code>radio</code>, though I'm not sure how. Making them hidden radios makes it easy to handle them as GET/POST values.</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