Fieldset along with the Select all checkbox.

[tlshinde]

I would like to implement the functionality shown in the screenshot below, which includes a fieldset along with a 'Select All' checkbox. Is this possible? If so, could you provide me with the schema for it?

[sdetweil]

well, its not in the schema.. its in the form.
you cannot put full function in the onchange=... ONLY the function call

{
  "schema": {
    "menu": {
      "type": "array",
      "title": "Options",
      "items": {
        "type": "string",
        "title": "Option",
        "enum": [
          "starter",
          "maincourse",
          "cheese",
          "dessert"
        ]
      }
    }
  },
  "form": [
    {
     "title":"<input type=\"checkbox\" onchange=\"handlechange()\"> Options ( check all)",
      "type": "fieldset",      
      "expandable": false,
      "order": 0,
      "items": [
    {
      "key": "menu",
      "notitle":true,
      "type": "checkboxes",
      "htmlClass":"foo",
      "titleMap": {
        "starter": "Starter would be great",
        "maincourse": "No way I'll skip the main course",
        "cheese": "Cheddar rules!",
        "dessert": "Thumbs up for a dessert"
      }
    }
  ]
    }
    ]
}

then the handleChange function might look like this (untested)

function handlechange(evt, node){
     var all_checked=$(evt.target).checked  // get 'all' checkbox state.. should be true/false
     // use jquery to get all the checkboxes under the 'foo' class
     // loop thru them 
     $('.foo .checkbox').forEach((box)=>{ 
         box.checked = all_checked
     })
}

[tlshinde]

Hello, thank you for the input. Could you please tell me where to add the handleChange function? I'm using Angular with TypeScript.

[sdetweil]

see this

https://stackoverflow.com/questions/47068222/angular-4-checkbox-change-value

[tlshinde]

Hey @sdetweil , Using your code and the generated form appears as shown in the screenshot below. However, I would like the 'select all' checkbox to be positioned in front of the options to select all fields. By the way, I am using ajsf in my project.

Are there any limitations of the ajsf library that prevent me from adding this kind of UI, like a fieldset along with a 'select all' checkbox?

[sdetweil]

I don't know what you mean asjf.
this is the jsonform library

I see there is a different library for asjf angular

I do not know on the positioning. my literal coding places the checkbook in front

as far as restrictions.. this is just a lib that converts to HTML elements under the covers.. so whatever you can do in html,
I added the html checkbox for the label. you may have to use css for alignment..

[sdetweil]

I see you posted to the asjf github repo too
https://github.com/hamzahamidi/ajsf

[sdetweil]

closing, wrong project reference