access dojo checked checkboxes via javascript

Question

I am trying to access some diji.form.checkBoxes from javascript to find that checkboxes that have been checked by a user. My code is below. If I was using straight javascript I would use getElementsByName and do a for loop looking for the checked checkboxes. However, I need to do this with dojo and am unusure how to retreive the checked checkboxes. Any help would be appreciated

        <tr>
        <td colspan= "2"> 
             <!--  <input type="checkbox" name="fields" value="InstitutionName" /> College Name  -->
            <input dojotype="dijit.form.CheckBox" name="fields" value="Address"; onKeyUp="dojoFunction();" /> Address  
            <input dojotype="dijit.form.CheckBox" name="fields" value="City"; onKeyUp="dojoFunction();" /> City 
            <input dojotype="dijit.form.CheckBox" name="fields" value="Zip"; onKeyUp="dojoFunction();" /> Zipcode 
            <input dojotype="dijit.form.CheckBox" name="fields" value="Phone"; onKeyUp="dojoFunction();" /> Phone Number 
        </td>
    </tr>
    <tr>
        <td colspan= "2">
            <input dojotype="dijit.form.CheckBox" name="fields" value="GeneralURL"; onKeyUp="dojoFunction();" /> General URL
            <input dojotype="dijit.form.CheckBox" name="fields" value="AdmissionsURL"; onKeyUp="dojoFunction();" /> Admissions URL 
            <input dojotype="dijit.form.CheckBox" name="fields" value="FederalAidURL"; onKeyUp="dojoFunction();" /> Financial AId URL 
            <input dojotype="dijit.form.CheckBox" name="fields" value="ApplicationsURL"; onKeyUp="dojoFunction();" /> Application URL 
        </td>
    </tr>

It would be helpful if you add the Dojo version you are using — iH8, Nov 15 '14 at 03:44

score 1 · Answer 1 · edited May 23 '17 at 12:27

http://jsfiddle.net/yw4pza8p/

First, it's recommended to use data-dojo-type instead of the deprecated dojotype.

To get the checkboxes, we can simply query by a CSS selector:

var fields = query("table input[name='fields']");

We can loop over this array to determine if a checkbox is checked. The simplest way to do this is

fields.forEach(function(field) {
    var checked = field.checked;
});

OR if you want to get the actual widget, it's like this:

fields.forEach(function(field) {
    var widget = dijit.getEnclosingWidget(field);
    var checked = widget.get('checked');
});

If all you need is the former, go with that. But if you need more functionality, like an onChange event listener, use the widget.

score 0 · Answer 2 · answered Nov 15 '14 at 15:08

like Roman said, you should go with data-dojo-type instead of the old dojoType. I would use data-dojo-id for accessing the widgets directly:

<html>
<head>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
  <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
  <script>
    require(["dojo/parser", "dijit/form/CheckBox", "dijit/form/Button"]);
  </script>
</head>

<body class="claro">
  <label>checkbox 1:</label><input name="name1" data-dojo-type="dijit/form/CheckBox" data-dojo-id="checkbox1" /><br/>
  <label>checkbox 2:</label><input name="name2" data-dojo-type="dijit/form/CheckBox" data-dojo-id="checkbox2" /><br/>
  <button data-dojo-type="dijit/form/Button">Display Selected
    <script type="dojo/on" data-dojo-event="click">
      alert((checkbox1.checked ? "1 checked\n" : "") + (checkbox2.checked ? "2 checked" : ""));
    </script>
  </button>
</body>

</html>

How will you do this approach for 'n' number of widgets in a loop? — Taha, Nov 18 '14 at 11:44
@Taha, as I understood the question, we require to know which checkboxes got checked rather than getting a count of them. Also, the question specifies 8 checkboxes, and my approach allows different logic for each. — Elad, Nov 19 '14 at 12:51

score 0 · Answer 3 · answered Nov 15 '14 at 23:16

Dojo keeps track of all registered widgets. You could access those via dijit/registry by id or domnode. For example if you would put an identifier on your containing element:

<tr id="container">
   <!-- your dijits -->
</tr>

You could fetch them using something like this:

require([
    'dojo/dom',
    'dijit/registry'
], function(dom, registry) {
    var container = dom.byId('container');
    var dijits = registry.findWidgets(container); //returns array of dijit instances
});

If you put identifiers on the dijits themself like this:

<input id="dijitFoo" ...>
<input id="dijitBar" ...>

You could fetch them with something like this:

require([
    'dijit/registry'
], function(registry) {
    var dijitFoo = registry.byId('dijitFoo'); //returns dijit instance
    var dijitBar = registry.byId('dijitBar'); //returns dijit instance
});

Once you've got your dijit instance(s) you could simply check property dijit.checked and you've also got all the regular dijit/checkbox properties and methods at your disposal.

access dojo checked checkboxes via javascript

3 Answers3