CODEWITHSUNDEEP
javascriptjqueryhtml
DivDiff
DivDiff

Reputation: 983

Radio button stays checked after clicking another one

I'm trying to set up a series of radio buttons which will become unchecked after clicking another one, i.e. only one can be checked at a time. I also make a text area below the radio buttons appear or disappear based on which radio button has been selected. My html is

<table id="tableId">
  <tbody>
    <tr>
      <td>
        <div id="selectTitle">
          Some Select
        </div>
        <select id="stuff">
          <option value="0">option 0</option>
          <option value="1">option 1</option>
          <option value="2">option 2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <div>
          Radio Options
        </div>
        <ul>
          <li>
            <input id="rad1" type="radio" /> rad1 </li>
          <li>
            <input id="rad2" type="radio" /> rad2 </li>
          <li>
            <input id="rad2" type="radio" /> rad3 </li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <input id="textArea" type="textarea" />
      </td>
    </tr>
  </tbody>
</table>

and my javascript is

$("#rad1").click(function() {
  $("#rad2").prop("checked", false);
  $("#rad3").prop("checked", false);
  $("#textArea").hide();
});
$("#rad2").click(function() {
  $("#rad1").prop("checked", false);
  $("#rad3").prop("checked", false);
  $("#textArea").hide();
});
$("#rad3").click(function() {
  $("#rad1").prop("checked", false);
  $("#rad2").prop("checked", false);
  $("#textArea").show();
});

Here's the problem:

rad1 and rad2 work correctly. When you click on them, the buttons toggle from being checked to unchecked as expected. However, when you click rad3, it stays checked, and won't become unchecked until you refresh the page. I looked through the cases, and nothing seems to be different between them. Here's a jsfiddle with my code. Any help is appreciated!

Upvotes: 7

Views: 13934

Answers (4)

LadyKC
LadyKC

Reputation: 1

Line 26 in your HTML has an issue, you have duplicated the ID for type rad3.

Changed the id to rad3 and seems to be working as expected.

Upvotes: 0

Krzysztof Atłasik
Krzysztof Atłasik

Reputation: 22595

If you give your radio inputs same name, they would work as you uexpect:

<ul>
    <li><input id="rad1" name="rad" type="radio" /> rad1 </li>
    <li><input id="rad2" name="rad" type="radio" /> rad2 </li>
    <li><input id="rad3" name="rad" type="radio" /> rad3 </li>
</ul>

Upvotes: 22

Rory McCrossan
Rory McCrossan

Reputation: 337560

If you want to group radio buttons they all need to have the exact same name attribute. Then you get the behaviour by default. From there you can apply a single change event handler to toggle the #textarea element based on the selected value.

Also note that you duplicated the rad2 id, which is invalid, and also radio inputs require a value attribute. Try this:

$('input[name="foo"]').change(function() {
    $('#textArea').toggle(this.value == '3');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><input id="rad1" type="radio" value="1" name="foo" />rad1</li>
  <li><input id="rad2" type="radio" value="2" name="foo" />rad2</li>
  <li><input id="rad3" type="radio" value="3" name="foo" checked="true" />rad3</li>
</ul>

<input id="textArea" type="textarea" />

Upvotes: 6

fer.reyes4
fer.reyes4

Reputation: 129

You must put thename property to all your radios in a group. The name should be the same in your 3 radios. like:

<input type="radio" name="radio" value="Val 1">
<input type="radio" name="radio" value="Val 2">

Upvotes: 0

Related Questions