CODEWITHSUNDEEP
javascriptprototypejscss-selectors
Jorge Israel Peña
Jorge Israel Peña

Reputation: 38586

Prototype Selection Help

Hey guys, I'm trying to make a small addition to a web app I use. Right now I am trying to check all of the checkboxes on the page which have class .checkBox (In case it is needed to differentiate/select). The checkboxes are descendants of divs of class .someClass, it's just that there are many divs which have that class. I want to check the boxes which are descendants of divs whose class is only .someClass.

In other words:

<!-- Check this box -->
<div class="someClass"> [...] <input type="checkbox" class="checkBox" /></div>

<!-- But not this one -->
<div class="someClass otherClasses lolWut"> [...] <input type="checkbox" class="checkBox" /></div>

Remember, the checkboxes aren't direct children, but descendants.

Thanks, I would appreciate any help :)

Upvotes: 0

Views: 1241

Answers (1)

No Surprises
No Surprises

Reputation: 4901

Here you go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Check the boxes</title>
    <script src="prototype.js" type="text/javascript"></script>

    <script type="text/javascript">
    function checkThem() {
      // get all the .someClass divs
      $$(".someClass").each(function(item) {
        // filter out the ones that have additional classes 
        if(item.className == 'someClass') {
          // get the .checkBox descendants
          item.select('.checkBox').each(function(checkbox) {
            // check them
            checkbox.checked = true;
          });
        }
      });   
    }
    </script>

</head>

<body>

  <!-- Check this box -->
  <div class="someClass">Check: <input type="checkbox" class="checkBox" /><input type="checkbox" class="checkBox" /></div>

  <!-- But not this one -->
  <div class="someClass otherClasses lolWut">Don't check: <input type="checkbox" class="checkBox" /></div>

  <!-- Check this box -->
  <div class="someClass">Check: <input type="checkbox" class="checkBox" /><input type="checkbox" class="checkBox" /></div>

  <br /><br />

  <a href="#" onclick="checkThem(); return false;">Check them.</a>

</body>
</html>

Upvotes: 3

Related Questions