if-else no working in javascript (jquery)

Question

I do not understand why it still does not pass the form, even if I choose another checkbox? According to the if-else action, if else is empty, then do it

HTML:

 <form action="http://youtube.com" method="get">
  <ul>
    <li>
      <input id="checkbox_yoda" type="checkbox" name="character" value="light_side">
      <label for="checkbox_yoda" data-sentence="Force is strong in you">Yoda</label>
    </li>
    <li>
      <input id="checkbox_trooper" type="checkbox" name="character" value="dark_side">
      <label for="checkbox_trooper" data-sentence="Just chillin'">Trooper</label>
    </li>
    <li>
      <input id="checkbox_vader" type="checkbox" name="character" value="dark_side">
      <label for="checkbox_vader" data-sentence="There is no escape from the Dark Side.">Vader</label>
    </li>
  </ul>
  <button type="submit">Turn to the dark side</button>
</form>

JQUERY:

$("document").ready (
    function()
    {
        $("button").click(
            function()
            {
                if ($("input#checkbox_yoda :selected"))
                {
                    alert('you pick yoda');
                    return false;
                }

                else
                {
                    return true;
                }
            }
        )
    }
)

You are checking if the object exists (which it always does by using jquery selector) and not if it is selected. — Lain
– Lain, Commented May 9, 2018 at 13:48
$() returns a jQuery object. And objects in javascript are truthy. If you put .length on the end of it, it will return 0 if the element is not found, and 0 is falsey — Taplar
– Taplar, Commented May 9, 2018 at 13:48
Also remove the space between the input selector and :checked. The space signifies a child selector, which I'm assuming you do not want. — Taplar
– Taplar, Commented May 9, 2018 at 13:49
or you could use $('#checkbox_yoda').is(':checked') - if it is a checkbox - :selected is for dropdownlists — Pete
– Pete, Commented May 9, 2018 at 13:50
Kinda sad how people hunt points on typo/nonrepro/already answered in comments long ago questions.. — JavaScript
– JavaScript, Commented May 9, 2018 at 14:36

Ankit Agarwal · Accepted Answer · 2018-05-09 13:51:39Z

Checkbox has :checked selector so use is(':checked') to determine if the checkbox was checked or unchecked.

$("document").ready (
  function()
  {
    $("button").click(
      function()
      {
        if ($("input#checkbox_yoda").is(':checked'))
        {
          alert('you pick yoda');
          return false;
        }

        else
        {
          return true;
        }
      }
    )
  }
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://youtube.com" method="get">
  <ul>
    <li>
      <input id="checkbox_yoda" type="checkbox" name="character" value="light_side">
      <label for="checkbox_yoda" data-sentence="Force is strong in you">Yoda</label>
    </li>
    <li>
      <input id="checkbox_trooper" type="checkbox" name="character" value="dark_side">
      <label for="checkbox_trooper" data-sentence="Just chillin'">Trooper</label>
    </li>
    <li>
      <input id="checkbox_vader" type="checkbox" name="character" value="dark_side">
      <label for="checkbox_vader" data-sentence="There is no escape from the Dark Side.">Vader</label>
    </li>
  </ul>
  <button type="submit">Turn to the dark side</button>
</form>

Takit Isy · Accepted Answer · 2018-05-09 15:05:27Z

As you've got a multiple choice, you may want to do something like this:

$("document").ready(
  function() {
    $("button").click(
      function() {
        $("input[type=checkbox]").each(function() {
          if ($(this).is(':checked')) {
            alert('You picked ' + $(this).siblings('label').html() + '.');
          }
        })
      }
    )
  }
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://youtube.com" method="get">(Try selecting more than one)
  <ul>
    <li>
      <input id="checkbox_yoda" type="checkbox" name="character" value="light_side">
      <label for="checkbox_yoda" data-sentence="Force is strong in you">Yoda</label>
    </li>
    <li>
      <input id="checkbox_yobiwan" type="checkbox" name="character" value="light_side">
      <label for="checkbox_obiwan" data-sentence="">Obiwan</label>
    </li>
    <li>
      <input id="checkbox_trooper" type="checkbox" name="character" value="dark_side">
      <label for="checkbox_trooper" data-sentence="Just chillin'">Trooper</label>
    </li>
    <li>
      <input id="checkbox_vader" type="checkbox" name="character" value="dark_side">
      <label for="checkbox_vader" data-sentence="There is no escape from the Dark Side.">Vader</label>
    </li>
    <li>
      <input id="checkbox_luke" type="checkbox" name="character" value="light_side">
      <label for="checkbox_luke" data-sentence="">Luke</label>
    </li>
  </ul>
  <button type="submit">Turn to the dark side</button>
</form>

Hope it helps.

Collectives™ on Stack Overflow

if-else no working in javascript (jquery)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related