CODEWITHSUNDEEP
javascriptjqueryhtml
FSp1337
FSp1337

Reputation: 11

if-else no working in javascript (jquery)

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;
                }
            }
        )
    }
)

Upvotes: 1

Views: 78

Answers (2)

Takit Isy
Takit Isy

Reputation: 10081

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.

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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>

Upvotes: 1

Related Questions