CODEWITHSUNDEEP
javascriptjqueryhtml
Zedd Lambo
Zedd Lambo

Reputation: 17

Can't get checkboxes to clear

Checkboxes aren't clearing on my chrome extension...

Here is the javascript/HTML I have:

$('#clearAll').click(function() {
  $(':checkbox').each(function() {
    $(this).removeAttr('checked');
    $('input[type="checkbox"]').prop('checked', false);
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<html>

<head>

  <a href="index.html">Back</a>
  </br>
  <title>Segmenting to Partners</title>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <style type="text/css">
    body {
      max-width: 300px;
      min-width: 300px;
      margin: 40px;
    }
  </style>
</head>

<body>
  <h2 style="color:red"><u>blah</u></h2>
  <a id="clearAll" href="#">Clear All</a>
  <p class="c1"><span class="c9 c2">Workflow</span>
  </p>
  <input type="checkbox" name="Solved Issue" value="Solved initial issue">Solve initial issue</br>
  <input type="checkbox" name="" value="">blah blah blah blah</br>

  <input type="checkbox" name="Solved Issue" value="Solved initial issue"><span class="c2">options 3</span>
  </br>
  <input type="checkbox" name="Solved Issue" value="Solved initial issue"><span class="c2">option 4</span>
  </li>
</body>

</html>

The thing is it looks like this is functioning properly when you run it here, but it's not in my chrome extension i'm working on, and i just can't figure out why...

Upvotes: 0

Views: 58

Answers (2)

talemyn
talemyn

Reputation: 7950

You've got a couple of issues going on with that code:

  1. Your jQuery version does not support the prop method.

prop was not added to jQuery until v1.6. For the version that you're using, you would use the attr method instead.

  1. You have put way too much logic in for what you are trying to do. :)

The logic that you need is to retrieve all of the checkboxes and change their checked value. What you have retrieves all of the check boxs, loops through each one, changes the checked value, retrives all of the checkboxes again, and changes their checked value again.

You are heading the right way, but it looks like your code grew as you were trying to troubleshoot. :) This should take care of what you are trying to do:

$("#clearAll").click(function() {
    $(":checkbox").attr("checked", false);
});

EDIT: I just saw the other comment about supressing the default behavior of the a element. My preferred way of doing this is by setting the href attribute to javascript: void(0);, like this:

  <a id="clearAll" href="javascript: void(0);">Clear All</a>

That supresses the default click action of the link in a cross-browser (including old versions of IE) way.

Upvotes: 0

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

You're using jQuery v 1.2.3, which doesn't support the prop method.

Upgrade to at least 1.6.

You could then simply do:

$('#clearAll').click(function() {
  $('input[type="checkbox"]').prop('checked', false);
});

Also, it's best to use anchors (a) for their intended purpose – to take you somewhere. A button may be more appropriate for clearing the checkboxes:

<button id="clearAll">Clear All</button>

Snippet

$('#clearAll').click(function() {
  $('input[type="checkbox"]').prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>

  <a href="index.html">Back</a>
  </br>
  <title>Segmenting to Partners</title>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <style type="text/css">
    body {
      max-width: 300px;
      min-width: 300px;
      margin: 40px;
    }
  </style>
</head>

<body>
  <h2 style="color:red"><u>blah</u></h2>
  <button id="clearAll">Clear All</button>
  <p class="c1"><span class="c9 c2">Workflow</span>
  </p>
  <input type="checkbox" name="Solved Issue" value="Solved initial issue">Solve initial issue</br>
  <input type="checkbox" name="" value="">blah blah blah blah</br>

  <input type="checkbox" name="Solved Issue" value="Solved initial issue"><span class="c2">options 3</span>
  </br>
  <input type="checkbox" name="Solved Issue" value="Solved initial issue"><span class="c2">option 4</span>
  </li>
</body>

</html>

Upvotes: 1

Related Questions