How to have a checkbox that will check/uncheck every checkbox of a form input

[guilmxm]

Hi,

I have built an interface in Simple XML that allows users to simulate the migration of specific items from main to an other, example: migrating partitions CPU usage from a frame to another.

I have a few checkbox input forms automatically populated by a main search.

What i would like is having a checkbox that will allow to check or uncheck every checkbox for that input.
This would allow users to check all boxes within a single action, instead of having to manually select all.

Note that i don't want a checkbox static entry that selects all (such as settings "*" for value) which is already what i have.

I think the right answer will be using a javascript but honestly i don't any idea how to achieve this.

Splunk 6 dashboard example won't help as it is not (yet) implemented.
I could not either find an answer anywhere, even if i think this is something people often try to get...

To illustrate what i would like to get:

http://www.sanwebe.com/2014/01/how-to-select-all-deselect-checkboxes-jquery

http://briancray.com/posts/check-all-jquery-javascript

Thank you very much for any help on this !

Guilhem

[MaryvonneMB]

Hi,

Personnally, I made a javascript code for this purpose. It's not very elegant (I think) but it works. The idea is to fill/unfill the token associate to your master checkbox in the javascript (look and get the check status of your other checkboxes), I have first create an array with all values of my checkboxes. maybe there is a more elegant way to do, but I need this array for other purposes not related to select checkboxes.
Here what I've done:

`var tokensDefault = mvc.Components.get("default");

tokensDefault.on("change:all_fields", function () {
var checkboxAllFieldsStyle = $(".checkbox").find($('a[data-name="all"]')).children().attr('style') ;
if ( (checkboxAllFieldsStyle !== "display:none") && (checkboxAllFieldsStyle !== "display: none;") ) {

var allFields=[];
for(key in fieldsToken){
allFields.push(nameArray[fieldsToken[key]]);
}

mvc.Components.getInstance("default").set('form.fields', allFields);

} else if( (checkboxAllFieldsStyle == "display:none") || (checkboxAllFieldsStyle == "display: none;") ) {

mvc.Components.getInstance("default").unset('form.fields');
};
});`

Hope it can help

Cheers

[guilmxm]

Hello !

Yeah, thank you this looks exactly what I was looking for when I opened this question !

Would have a quick simple xml on how to use the js ? Should the master checkbox have the token set to "fields" and a value of "allFields" ?

Cheers,

[MaryvonneMB]

Hello,

happy to help ^^, I rest my mind on this problem for a while!

here an extract of my simple xml:

  <form script="checkboxes.js"  hideEdit="true" hideFooter="true" hideSplunkBar="true">

<row>
  <panel>
  <input type="checkbox" token="all_fields">
        <label>Select/Unselect</label>
        <choice value="all">All fields.</choice>
      </input>
      <input type="checkbox" token="fields">
        <label>fields_1</label>
        <choice value="value1">value 1</choice>
        <choice value="value 2">value 2</choice>
        <choice value="value 3">value 3</choice>
      </input>
  </panel>
</row>

</form>

So, when you select the "Select/Unselect" check box, the token value will change and it will be detected by checkboxes.js.
To know if the checkbox is select or not the js code look to style attribute.
in your js code you must have an array with all your checkboxes values (value 1, value 2 etc...) In my code this array is named "fieldsToken". If you have several tokens (like me in my original code) I design it as array of array (one array for each token)
The js code will fill an array name "allFields" with all value in the fieldsToken array. Then the code sets the "fields" token with "allFields" array as if you manually select associated checkboxes.

[exocore123]

Have you figured this out?