We Keep Coding

Unable to check and uncheck the dynamically rendered checkboxes in react

I am iterating over the permissions and make checkbox checked if permission included in a predefined values(i.e val) and make checkbox unchecked otherwise, which it did well, but when I click the rendered checkboxes to check or to uncheck it do nothing.
I can't check or uncheck after I rendered my checkboxes. I need your help , thanks.

Your role.permissions is never getting updated, so the checkbox checked attribute stays as its initial value. Are you using controlled components? If so, you can add an onChange event handler to your input to update your role.permissions.

Firstly, the ternary operation in checked={role?.permissions?.includes(val[i]) ? true : false} is redundant and can be simplified to just checked={role?.permissions?.includes(val[i])}, since the value of that property will be either true or false anyway.
Secondly, by setting value= to true or false, you are freezing the checkbox to that value. You can omit that setting, as the value attribute will be submitted according to the checked or unchecked value. Also, typically you assign value=checked or value=unchecked, not true and false.

use map function and useState to control your checkbox values.

Show radio Property in DOM

So I have this radio button that I click and it does click. Except when I inspect the DOM I do not see the checked attribute being added, but I can see that the property check has been set to true. I need to be able to preserve this state since I am saving the HTML. Is there away to add/remove the checked attribute as the property changes? Other than adding a handler on click and checking the property to add or remove the attribute.

You will have to manually set that if you want the DOM to change. The DOM does not automatically modifies itself.
To get the current value of the radio button use javascript:
document.getElementById("radio_group_92").checked // true or false
To set the value, use this:
var radiobtn = document.getElementById("the_id_of_the_group");
radiobtn.checked = true;
The radio button documentation only specifies about the checked property:
Definition and Usage
The checked property sets or returns the checked state of a radio
button.
This property reflects the HTML checked attribute.

There are properties and attributes. Attributes are part of the XHTML and properties are not. In general, setting the property does not affect the attribute on the DOM like in your example or the value attribute of a text input. There are some exceptions though, like the id and name properties which will change the attributes of the DOM too.
In your case you will indeed have to manually check for the checked property as #cacho suggested. However, I think that the change event is more suitable than the click.
document.getElementById("radio_group_92").addEventListener("change", function(e){
console.log(e.target.checked);
}, false);

Loop through visible input elements in a form in Javascript?

I'm trying to loop through all visible inputs within a form and set their value to be empty. What I have doesn't seem to work for text inputs, it returns undefined. Any ideas how to do this?

jQuery has a :visible selector as well as an :input selector. In addition, most jQuery methods operate on the entire set. val() can be used directly rather than looping through the set.
currentForm.find(':input:visible').val('');

Textbox inputs would have a tagName of "textarea". Not sure why the other text types aren't working. Have you tried:
childs[i].values = '';
?

How do I use jquery's prop() to set the attribute of a checkbox?

I want to use prop() to set the attribute of a checkbox to checked.
When I use prop("checked",true) I can visually see that the checkbox is checked, but if I look at the HTML there is no attribute value called checked.
For example:
<input type="checkbox" class="my_class" checked>
is what I would expect to see after using prop("checked", true).
However, I don't see any change in the HTML code. I want to later reference whether or not the attribute checked is set, but since there is not attribute called checked in the HTML, then I'm unable to reference it.

When using prop() you are changing the property and not the attribute, so the changes can't be seen in a DOM inspector, but it is for all intents and purposes changed.
To later see if the element is checked, you'd do:
$('.my_class').is(':checked')
which would return true when checked or false when unchecked, regardless of what you might see in a DOM inspector.

Is there a specific reason you wouldn't use attr() for this application?
If not, that's what you should be using instead of prop()

How can I change the inline attribute checked="checked" in javascript?

I'm working on a move up/move down function on one of my lists and the things I need to move contain checkboxes. However, I set the checked attribute in PHP and when I switch the innerHTML of the elements, the checked status always reverts to what the checked attribute is set. I tried making an onchange function to change the attribute as I click it with
if(el.checked == true)
el.setAttribute("checked", "checked");
else
el.setAttribute("checked", "");
but that doesn't work (and i don't know why I even expected it to work, to be honest)
Any idea how I could do it? Switching the elements alltogether in the dom tree would be problematic as would be not setting the checked attribute in PHP.
edit: aparently there's no way to do what I asked but my problem is fixed by not being a lazy bastard and moving things around in the DOM like i'm suppsoed to.

When the checked attribute is present in HTML (no matter what value it has), then the IDL (DOM) attribute checked is initialized to true, as opposite to its default value false. Your code seems to expect otherwise. I don’t understand what you are trying to do, since you should be able to move a checkbox element withouh such operations. If you move the element node, there is no need to play with the attributes.

Set the checked property:
checkboxObject.checked=true|false
You can try this way
if(true) document.getElementById("check1").checked = true;
else document.getElementById("check1").checked = false;
Check on w3School.com
Hope this resolves your issue.