Multiple Checkbox in React JS | How to manage multiple checkbox in reactjs | select all checkbox

Hello friends welcome back to my YouTube channel copy character in this video I am going to show you how we can control multiple checkbox in real chairs so let's start let's assume a condition that you have faced bunch of data from an API now you need to send IDs or post that you want to delete in the UI you have printed the post and given a checkbox to each item so that you can select the item and send them to delete API inside the payload right now on the screen you can see that I have printed multiple posts and I have given a checkbox to each items as well as on the right side you can see there is an button that is named as check on so the purpose of this button will be that when a user will click on this then all the posts that are shown on the browser will be get automatically selected in the vs code you can see the structure of the jss that I have written till now so here I have taken a data state where I have stored all the static post that I have printed on the browser so it have a unique ID a title and a body inside the J access you can see I have run the map function to print them as well as here I have written the input checkbox but right now you can see that there is no any control method of the reactor so here we are going to control this checkbox by the react.js that is called controlled react.js component before going further let me uh let me point out something that we are going to do the thing is that whenever user will select the check box we will store the ID of the post so for that first here I am going to create a state that I am going to name it as selected items set selected items used it and initially I am going to set it as the blank array and here to the check box I am going to give it a value we need to store the ID of the post so here to the check box I am going to give the value the items dot ID so the it will have the value of the post ID as well as here I am going to call a event function the event function will be on change the functions name will be like check box Handler so here I am going to create the function that is check box Handler and here I am going to use the event props to check the status of the checkbox like whether it is selected or not so for that I am I am going to store that status to a variable that is each selected and we can check it status by its event props that is called event dot Target dot check is already selected then it will be returned true as it will return the false and in another value inner and in another state so from this we are going to get the status of the check boss whether they are selected or not so here I am going to write a condition like if each selected means if the checkpost is checked then what we will do we will store the post ID to the selected items state so for that I am going to call this set selected items functions here and we'll retrieve the old selected items data if it has any and then we will push the value of the check box you remember that we have set the checkbox value as the item ID that is the post ID so to get the post ID here again I am going to call another variable that will be called as the value and that will be equal to event dot Target dot value if you check the data variable then you will find that the ID ID is a type of a number and here whenever we get a value from a input check box we always get a type of string so here I am going to convert it into the number so for that I am going to call the parts end function that means the the value that we are going to receive from the input checkbox it it will be initially the type of stream but using the pass int function we are going to convert that string to type of number so inside the is selected condition we are going to derive the all the old datas and after retrieving the old datas we are going to push the value that is the ID of the post to the selected items if it is not selected let's suppose that you already have check the post number of one now what if you re-click on the check box so it will so it will be now unchecked so in this condition the else logic will be run so inside this what we need to do we need to remove the ID that was already inside the selected items okay so how will you do this for that again I am going to call the set selected items functions and inside it again I will call a callback function here we can rewrite the all the old data by the parameter that is called Brave data or you can name it anything that you want it does not matter and for the priv data again I am going to call the filter function and will return ID that is not equal to value as well as we also here need to control the checked attribute of the input type checkbox so we will control it through the react.js function so here I am going to again write a condition like selected items Dot includes item dot ID so let me explain you what I have written here so here I have first I have used the selected items variable so we all know that it was the initially a type of array so here to the array we I have included a function that is called includes so includes always check the given uh value whether it exits inside the array or not if it exits inside the array then it will return true else it will return false so by by running that condition we can control the check attribute of the input checkbox let's save it and check whether it's working or not as we have written the code so now if I check on the I device now we can see that the uh it gets selected if I check on the attitude it gets later so let me also print the uh selected items value over here so that we can check it as we as we click on any item uh so for that I am going to print the selected items variable over here so now we will be able to see it live whether we are checking or not so now you can see that the post one and post 2 is already selected so here we are getting ID 1 and 2. now if I check on ID3 then we are getting one two three now if I uncheck the post number two then you will see that the id2 has going to move from the list now only we have one and three so all the logos here is working very nicely even now let's suppose that on the page load as the component load we want initially the post number uh two remain selected so for that uh we can initially pass the uh two that is I post added to to the selected items variable now if I save and refresh then you receive that the automatically it is not checked or rest are unchecked so so that means uh we have the given so that means that we have written the code to control the input checkbox it's working it's working perfectly so so now the next thing is that that we need to do is that we need to make we need to execute the check all button so again I am going to write a function to the check all so on click event I am going to call a function that will be named as check on Handler so here let us create the function so what it will do so whenever a user will click on the check call the all the post will get selected automatically so for that what we need we need ID of the post and how we can get the ideas of all the post we can run a loop to the data variable and can extract the for all the post IDs so what we can do here I am going to run map function so it will execute the function to each item inside the data so item return item dot ID and at the end map Always written an error so I am going to store that added to any variable so I am going to name it as post IDs after running the my functions now we will have the IDS of all the post so after having the all the IDS now I am going to receive this set selected items and will directly post the IDS to it so right now on the screen we can see that only Post Number 2 is selected so let me click on the check all button and see what it what is happening so now you can see that as I clicked on the button now we have all the post address over here as well as on the left side you can see that all the post is now selected now the next thing is that what will happen if I click it on again nothing is happening now we need to write a condition like if the all the posts are selected then we will rename the button to uncheck on so that usual so that if user click on the button again then we will uncheck all the post so let's first change the name of the button if all the posts are selected so for that what I am going to do here I am going to check the length of the data data is the state data is the variable state that way where we have stored the all the bunch of data that we have received after calling the API so I am going to check the length data dot length if it is equal to selected items selected items is the variable where we have stored all the post ID if it is equal to selected items link that means all the posts are selected if it is true then we will name the button as uncheck all else it will be called check call if all the posts are selected then we will uncheck all so for that here also I am going to write the same condition like if data dot length is equal to selected items dot length then we will set selected items to a blank array if it is not equal then we will run the above logic so let me cut it and paste it inside the else so let's save it and check whether it's working or not so let me refresh it once so right now you can see the only post number two is selected because here we have passed the id2 so let me remove it save it again so now we can see the all items are unselected so let me click on the check all button so we have now all so now we have selected all the items and you can see that the buttons name has been changed to uncheck all so now if I click it on again so here we are getting an error that selected item select items is not a function so here we not so here we have called this related atom so it should be set selected items let's save it again so let us again click on the uncheck all so now we can see that the now all the ports are unchecked if we click it again so all are checked clicking on it all are unchecked now if as well as we can also select our post manually by one by one like I have checked the one number three and four so we are getting here one three four now if I click on the button so now all the posts are selected now if I want to remove one by one so I can remove it one by one hope I was able to explain each point and you like the solution for the handling multiple check boss please do not forget to like share and subscribe the channel thank you for watching

Channel: CopyCat Ram

Views: 9,109

Keywords: reactjs, manage multi checkbox, multiple checkbox, multiple checkbox in ractjs, select all in reactjs, how to checkall in reactjs, checkbox in reactjs, form control, learn reactjs, reactjs tutorial, tips, tips for developer, reactjs developer, learn javascript, reactjs project, react components, react hooks

Id: 0mJiHsljqsM

Length: 15min 14sec (914 seconds)

Published: Sun Apr 09 2023