Home/ Questions/Q 415579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T18:23:42+00:00

Hey guys, I’m trying to make a small addition to a web app I

  • 0

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 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0