0

Unable to Check/Un-check custom checkbox.

Explanation: On commenting out dispaly:none I can view, check, uncheck the blue checkbox. But the custom Checkbox cannot be checked or unchecked.

This is the expected output where the blue checkbox is not displayed. However having problem to check or uncheck the custom checkboxes. Your help is appreciated. Thank you.

1 Answer 1

1

Like you already did with the input type checkbox for the onChange event, you should include the click event handler also for the labels performing the same action:

  • onClick={handleSelectAll} on the first label
  • onClick={() => onClickDOP(day)} on the other labels
    suggestionsListComponent = (
        <ul>
            <li>
            <Checkbox checked={selectAll} onChange={handleSelectAll} />
            <label
                className="custom-checkbox-label"
                onClick={handleSelectAll}>  <--------
                All
            </label>
            </li>
            {filteredSuggestions.map((day: any, index: any) => {
            return (
                <li key={day.id}>
                <input
                    type="checkbox"
                    className=""
                    name={day?.name}
                    value={day?.name}
                    checked={day.active}
                    onChange={() => onClickDOP(day)}
                />
                <label
                    className="custom-checkbox-label"
                    onClick={() => onClickDOP(day)}  <--------
                >
                    {day?.name}
                </label>
                </li>
            );
            })}
        </ul>
    );
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you so so so much. Thank you. I do appreciate your help. .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.