Write Assigned Checkbox with airSlate SignNow

Write assigned checkbox

this is our jquery basic structure check boxes are used when user has to select more than one options available and checkbox can take two state either checked or unchecked let us use this checkbox here you can see one checkbox we used and one display area we have used to display the status of the checkbox now this is our jquery area here we will enter our jquery code so let us first read the value let us say ckb is our let us create a variable ckb status which is equal to our check box this is we are using the id ckb you can see the id here we have declared it as ckb so check box so this id is we used it as a selector and we are collecting the checked status so let us checked now this status we are storing it in our variable ckb status fine now this one thing we can do we can store it declare one a lot with this status so let us see how this a lot works we'll save it refresh this yeah false it is saying because we we are not showing the we have not checked it now let us say we will slightly move it this side fine this status we are suppose if you we don't want a lot now we want to display the value in our display box so there is a message area we kept it here it is available so what we will do we will access the id of the display this is the selector then html this part is equal to ckb status now whatever the value of the check box now let us keep it checked and on these are all not associated with any event this is on load event let me just refresh this okay fine it's checked now and the value is true we will collect the status of the check box anytime the either we check or uncheck it now for that let us keep this code inside a function or inside a event which which is associated with change event or check given ckb the id of the check box now change uh with change we will see the function now this okay let us complete this close this here fine let us mark it this is the part of the code which will be executed when we any change from check to uncheck or uncheck to check now this will read we will display it fine now this should work see this is the code that will be executed whenever we change the status let's save it and while on chains we are displaying the value of the status inside the our display area display area is marked here so let us refresh this fine now it is checked because you see we have written here checked now let us uncheck it now let us again check it let us uncheck it let us again check it so you can see the it reads the status of the checked status and displayed in the display box so far we are reading the status of the check box now what you will do will read the status and assign the another check box status based on the original status of the first one so we will learn how to assign the status to a check box this way so let us copy this we will not keep it as checked will keep it as unchecked let us copy this we will add one more checkbox id will make it 2 so this is a different checkbox will come inside this value okay here we will write it if our uh sorry this the id if sorry we were to read the value of the status if ckb status means if ckb status is true then let's take the value for the our ckb2 ckb2 now prop property now checked checked is true now you see this is will close it here if ckb status then ckb2 properties will be checked now the reverse of it else now let us copy up to this false if it is not checked then this will be false so and anyway we are status we are displaying also in our display box so let us cop save this refresh we have to now see that the status is displayed it is checked so second one got checked now i'll uncheck it okay it is unchecked now again i will check it it is checked i will uncheck it okay so this is how we will be changing the will be reading the status from one check box and assign the status to another check box we will learn how to add additional attributes and read the values let us add name name let's say abc fine now let us come back to some data attributes data attributes month name let's say june now um say another data attribute that is q equipment id is equal to abc123 fine let us okay now let us learn how we will receive these attributes now instead of using a particular one we will use the let us say alt any check box input type is equal to check box now input type check box will close this now fine now this change function now status we already reading so we'll remove this else conditions now let us say where name name is equal to because we are using so we will use this where this attribute name so we got the name now now let us say um status already we are getting let's try id where id is equal to our again we'll use this attribute id we already have id now one more now i will see the data attributes so let us say month name month will say month is equal to this data month name so already month name is there one more equipment id we have used so variable equipment id this data because the data attribute so we'll use equipment id now find all the variables we got it now let us display already status we are displaying here so let us say status plus because it's a variable so now again we'll start with the string let us go to the next line fine here we are starting the string now let us display status we are displaying name name plus name so again name is over now let us say we will display id id plus id plus okay id display now let us go to month month now this is variable month now let us check up to this point so so far whatever it is we'll see some error is there now this status is name name id id month month let's see what's the error is month name is not defined find month name data month name month name is here sorry you have to use single quotes here single quote here now okay let's try now again okay we got status true that we should give some gap here display status so before receiving name let us give some okay status true name abc id ckb month is june so we can save it run once more refresh it check it so we got all the data we are getting now one more we left it because we have one equipment id so let us go to next line we will see here the month so we'll give a plus now the string started equipment id now again plus id so equipment id also will get it now let us close this run this again some mistake month equipment id c q p e q pt id the variable names are declared so let us check it okay we got all the attributes name and its value equipment id is here its name its value is displayed here now we will learn how to enable or disable a checkbox based on another checkbox so let us remove all these extra attributes now this is a simple checkbox with id id is ckb now let us copy this paste it here idl ckb2 now i'm fine so now come back here here now again we will come to our selector of ckb double quotes and now again change function so it is change function here now inside that function you are reading the okay this line is fine now let us say this all these lines will remove now dml now here also we'll write status fine other things will remove okay this will display the status now based on this whatever is value if c k b status now uh if c k b status then so he will use this and now we will change the status of our ckb 2s that is the selector for ckb2 is the selector for the second checkbox that property now we'll say disabled is true that means if it is checked then it will be disabled let us close the bracket now here we other function let us copy this now if else now let's paste this and make it false so now there are two things two check boxes if you first check box we check it this will be disabled and uncheck it the second checkpost will enable again let's save it run this code yeah we have two check boxes now both this one is i am able to check or uncheck now let us check this now this is disabled i cannot uncheck now let us uncheck this i will keep this in checked condition now let us disable it it's disabled so by using this checkbox we are enabling and disabling the second check box from a group of check box will collect the values of checked check boxes to do this let us create a set of check boxes we have created one two three four five the value you can see everything values are different for five set of check boxes now let us come to the jquery part of it here we will change this because any check box changes its value we will be changing this input type check box input type check box change function now here um we will remove these things this up to this will remove now let us say html also will remove this we'll see what you will enter now input type check boxes any checkbox change function we have used let us come here first we will declare a blank string here we will be storing the values of the selected check boxes now we will use each each function here now let me take the inputs which are checked input type is equal to check box now here the check box will close it but now you are taking checked checked so close this now thing do a function fine now this each will close it here fine now this is the each function inside this will collect the as our str value str is equal to str will give some space because between these two values of check boxes will give some space plus this we are collecting then val val is here this is here okay fine so this is what we will collecting in the string now this let us save this runs refresh this okay we have got five set of check boxes now let us experiment okay two three still some issue is there let's see the error message no error why it is not displaying okay we are not give the string value here okay we'll see str now let's see the refresh it again now let us one okay fine three five now let us uncheck this three now these two now here is two four three so all are checked now now we can remove also see how it is changing so this is all the values of the associated check boxes we are collecting and displaying we can use the class attributes to get the values of the checked checkbox let us see that now this entire group will give a class is equal to let us say ckb now this is the class we assigned to all the five check boxes whatever we are using let us copy this place it here place it here now all the five have common class so we will access it all the check boxes which have the common classes now now here in the each here what you will do we will go for dot ck because we are accessing the class now we will show check box now checked let us put here okay so now we are accessing all the check boxes which are checked and having class as ckb so let us refresh this so you can see the still the same thing it works perfectly and we have used the class attribute to assign a group of checkbox if you have different groups of check boxes with having a particular class then we can use this you