Can't change checkbox to be checked, must reload page to be checked

Asked
Active3 hr before
Viewed126 times

9 Answers

checkedcheckboxchange
90%

In order for the checklist to change you have to set the checked prop to a variable in your state. This way, when you do setState the component will render again and this time checked prop of the input would be set to false.,The problem is when i click it it doesn't change the checkbox to be checked in interface, i need to reload page to make it checked ,for the first time, the checklist is checked or unchecked is based the JSON given by database, I dont know which one is my problem, at the onCheckChange function or checked{} attribute, or onChange{} attribute.

Example code would be such

class Apps extends React.Component {
    constructor (props) {
      super(props);
      this.state = {
        isChecked: false, // or true depending on what you want
        ...
      }
      this.onCheckChange=this.onCheckChange.bind(this)
    }

    onCheckChange(e){
      console.log(e.target.checked)
      this.setState({
        isChecked: e.target.checked // set the variable in the state
      })
    }
    onSubmitChecklistClicked = async (Id) => {
      var response = await RequestHandler(`${ENVIRONMENT.API_URL}api/v1.0/checklist`, {}, {Id})
      console.log(response);
    }

    render () {
        return(
            <Input type="checkbox" className="input-checked" 
            checked={this.state.isChecked} // use it here
            onChange={this.onCheckChange,() => this.onSubmitChecklistClicked(data.Id)}></Input>
        )
    }
}
88%

This will cause the button’s text to change when all of the check boxes are in a checked or unchecked state.,And that’s it. We now have persistent checkboxes.,This quick tip describes how to have your browser remember the state of checkboxes once a page has been refreshed or a user navigates away from your site to come back at a later date.

So, the first thing we’ll need are some checkboxes. Here are some I made earlier:

<div id="checkbox-container">
   <div>
      <label for="option1">Option 1</label>
      <input type="checkbox" id="option1">
   </div>
   <div>
      <label for="option2">Option 2</label>
      <input type="checkbox" id="option2">
   </div>
   <div>
      <label for="option3">Option 3</label>
      <input type="checkbox" id="option3">
   </div>

   <button>Check All</button>
</div>
load more v
72%

Pretag
 Pretag team - issue, fix, solve, resolve
65%

Pretag
 Pretag team - issue, fix, solve, resolve
75%

On Windows, check the Enable XAML Hot Reload checkbox (and the required platforms) at Tools > Options > Debugging > Hot Reload. In earlier versions of Visual Studio 2019, the checkbox is at Tools > Options > Xamarin > Hot Reload. ,Tips and Tricks for XAML Hot Reload,You can't add, remove, or rename files or NuGet packages during a XAML Hot Reload session. If you add or remove a file or NuGet package, rebuild and redeploy your app to continue using XAML Hot Reload.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

The checked binding links a checkable form control — i.e., a checkbox (<input type='checkbox'>) or a radio button (<input type='radio'>) — with a property on your view model.,Note: For text boxes, drop-down lists, and all non-checkable form controls, use the value binding to read and write the element’s value, not the checked binding.,The component binding

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>

<script type="text/javascript">
    var viewModel = {
		wantsSpam: ko.observable(true) // Initially checked
    };

    // ... then later ...
    viewModel.wantsSpam(false); // The checkbox becomes unchecked
</script>
load more v
22%

console show false in “checked”, does it mean empty in checkbox?,It means that the checkbox should be empty based on what you are trying to do. However if you were to click the box and reload the page your checked will be true however your input will not be checked. So the issue lies in how you are setting your DOM element to be in a checked state.,When debugging it helps to console.log any values to drill down where your error may be. For instance if you add

Thanks,
Gary

<script>
    function onClickBox() {
        let checked = $("#box").is(":checked");
        localStorage.setItem("checked", checked);

        $("#msg").text("Checkbox is checked: " + $("#box").is(":checked"));
    }

    function onReady() {
        $("#msg").text("Loaded.");

        let checked = "true" === localStorage.getItem("checked");
        $("msg").prop('checked', checked);

        $("#box").click(onClickBox);
    }
    $(document).ready(onReady);
</script>
<form>
    <div id="msg"></div>
<table>
    <tr><th colspan="3">Spatial Verbs</th></tr>
    <tr><td>Go/Walk-To/From</td>
        <td><input class="single-count" type="checkbox" id="box" name="chkboxGrp0[]" value="1"></td>
        <td class="vert-middle">0</td></tr>
load more v
60%

Pretag
 Pretag team - issue, fix, solve, resolve
48%

Hi all, I have two HTMLB checkboxes on the browser(IE6.0).,I would like to selecte one of thses and set the other one,// test() is triggered by one of the two chechboxes

Pretag
 Pretag team - issue, fix, solve, resolve

Other "checked-checkbox" queries related to "Can't change checkbox to be checked, must reload page to be checked"