Working with checkbox array

Asked

Viewed 201 times

0

Well, here’s the thing, I’m looking to edit a record that contains only a name and an array of other records, ifs (a relationship 1 to N). This array of ifs I play in the view as checkboxs, but I’m not getting it checked.

I am using vuejs. I wanted that when I clicked on edit, let already checked the states that it already has.

lista de registros

edição de registro

javascript vue.js

  • This "Upgrade" box is a modal?

  • Yes. But it can be another page without problems.

  • And this field "Search name", is it dynamic? Type when typing opens other names?

  • No. That’s all it is. Note that in the first image, the search name "JOSIVAN SOUSA" has several states related to it. I want to leave the states related to it checked in the second image

  • I get it. Put the HTML of one of these "edit" buttons for us to see what’s in it and know what to do.

  • I think it is possible to do this using Javascript only: when opening the modal, I call a function that will fetch the states within the table row and compare with the checkboxes. The states you have on the line, I mark the corresponding checkbox in the modal.

  • When I click edit, I get the following data: {
 "idnomes": 15,
 "strnome": "JOSIVAN SOUSA",
 "has_uf": [
 {
 "iduf": 1,
 "struf": "AC",
 "strdescricao": "Acre",
 "bolvisualizar": 1
 },
 {
 "iduf": 2,
 "struf": "PA",
 "strdescricao": "Para",
 "bolvisualizar": 1
 },
 {
 "iduf": 2,
 "struf": "MA",
 "strdescricao": "Maranhão",
 "bolvisualizar": 1
 }
 ]
}

  • I’m just having a hard time getting the checkups checked

Show 3 more comments

1 answer

0


When you click on "Edit", you take a code in JSON format:

{ "idnomes": 15, "strnome": "JOSIVAN SOUSA", "has_uf": [ { "iduf": 1, "struf": "AC", "strdescricao": "Acre", "bolvisualizar": 1 }, { "iduf": 2, "struf": "PA", "strdescricao": "Para", "bolvisualizar": 1 }, { "iduf": 2, "struf": "MA", "strdescricao": "Maranhão", "bolvisualizar": 1 } ] }

Now you need to make a parse in that code transforming it into a JSON object:

objeto = JSON.parse('{ "idnomes": 15, "strnome": "JOSIVAN SOUSA", "has_uf": [ { "iduf": 1, "struf": "AC", "strdescricao": "Acre", "bolvisualizar": 1 }, { "iduf": 2, "struf": "PA", "strdescricao": "Para", "bolvisualizar": 1 }, { "iduf": 2, "struf": "MA", "strdescricao": "Maranhão", "bolvisualizar": 1 } ] }');

Then get all the checkbox it has in the modal (change "meumodal" to the id of your modal):

elems = document.getElementById("meumodal").getElementsByTagName("input");

Then a loop double will check the checkbox who have value equal to the acronym on JSON:

for(x=0;x<objeto.has_uf.length;x++){
    for(y=0;y<elems.length;y++){
        if(elems[y].value == objeto.has_uf[x].struf){
            elems[y].checked = true;
        }
    }
}

Open the example below:

objeto = JSON.parse('{ "idnomes": 15, "strnome": "JOSIVAN SOUSA", "has_uf": [ { "iduf": 1, "struf": "AC", "strdescricao": "Acre", "bolvisualizar": 1 }, { "iduf": 2, "struf": "PA", "strdescricao": "Para", "bolvisualizar": 1 }, { "iduf": 2, "struf": "MA", "strdescricao": "Maranhão", "bolvisualizar": 1 } ] }');
elems = document.getElementById("meumodal").getElementsByTagName("input");
for(x=0;x<objeto.has_uf.length;x++){
	for(y=0;y<elems.length;y++){
		if(elems[y].value == objeto.has_uf[x].struf){
			elems[y].checked = true;
		}
	}
}
<div id="meumodal">
	<input type="checkbox" value="AC" /> AC
    <br />
	<input type="checkbox" value="DF" /> DF
    <br />
	<input type="checkbox" value="MA" /> AC
</div>

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.