Count checked checkboxes in React.js

Question

I'm using a document structure like this

render() {
return (
    <div className="MyComponent">
        <ul className="">
            {parseRecommendations(this.props.recommendations)}
        </ul>
    </div>
);
}

function parseRecomendations(recommendations) {
    return recommendations.map((recommendation, key) => {
        return (<Recommendation data={recommendation} key={key} />);
    });
}

Where each Recommendation is its own component containing a checkbox

class Recommendation extends Component {
    const recommendation = this.props.data;
    const pageUrl = recommendation.url;

    return (
        <li className="article-item" key={key}>
            <div className="article-info">
                <input type="checkbox" defaultChecked="checked" aria-described-by={recommendation.pii} />
                <a className="journal-title" href={pageUrl} id={recommendation.pii}>{recommendation.title}</a>
            </div>
        </li>
    );

I'd like to have a title saying [Download (x) PDFs], where x is the number of selected checkboxes. How do I find the value of x in this case?

Andreyco · Accepted Answer · 2016-03-14 12:19:13Z

6

You need to store information about whether input is "checked" in your data. Then, simply count items with truthy "checked" flag.

Here is my solution. You should be able to get principle here and modify your code.

const data = [
    { checked: false, value: 'document 1' },
    { checked: true, value: 'document 2' },
    { checked: true, value: 'document 3' },
    { checked: false, value: 'document 4' },
    { checked: false, value: 'document 5' },
];

const Item = props => (
    <div>
        <input type="checkbox" checked={props.checked} onChange={props.onCheckChange} />
        { props.value }
    </div>
)
var Hello = React.createClass({
    getInitialState() {
        return {
            items: this.props.items.concat(),
        };
    },

    onCheckChange(idx) {
        return () => {
            const items = this.state.items.concat();
            items[idx].checked = !items[idx].checked;
            this.setState({items});
        }
    },

    totalChecked() {
        return this.state.items.filter(props => props.checked).length;
    },

  render() {
    return (
            <div>
                { this.state.items.map((props, idx) => (
                    <Item {...props} key={idx} onCheckChange={this.onCheckChange(idx)} />
                )) }
                Total checked: { this.totalChecked() }
            </div>
        );
  }
});

ReactDOM.render(
  <Hello items={data} />,
  document.getElementById('container')
);

answered Mar 14, 2016 at 12:19

Andreyco

22.9k5 gold badges63 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Antony Koch Over a year ago

Instead of counting them up a tally count be maintained within onCheckChange and stored in state. Might not be ideal, but is a viable alternative.

Andreyco Over a year ago

The less state you maintain, the better. Counting total is not expensive. Personally, would not store it in state. On the other hand, I agree with you. In certain cases it's wise to cache results of some operations.

WitVault · Accepted Answer · 2016-03-14 13:35:18Z

2

If you just want to get the number of selected check-boxes you can try this

let checkedBoxes = document.querySelectorAll('input[name=chkBox]:checked');

Then get the total checked boxes via checkedBoxes.length

Edit:

Instead of querying whole document. You can get the nearest possible parent via getElementsByClassName or getElementById and then apply querySelectorAll on that element.

e.g

let elem = document.getElementsByClassName("MyComponent");

let checkedBoxes = elem.querySelectorAll('input[name=chkBox]:checked');

edited Mar 14, 2016 at 13:35

answered Mar 14, 2016 at 12:57

WitVault

24.2k20 gold badges107 silver badges137 bronze badges

1 Comment

Andreyco Over a year ago

Providing such answer, please, at least advise OP to apply scope - not to query document.

Cassio Seffrin · Accepted Answer · 2021-12-16 20:13:22Z

You also could obtain the total of selected checkboxes by element type. The "console.log(totalSelectedCheckboxes)" will print them when the state of totalSelectedCheckboxes change using useEffect Hook.

import React, { useState, useEffect } from 'react';

const RenderCheckboxes = () => {
    const [totalSelectedCheckboxes, setTotalSelectedCheckboxes] = useState(0);
    function handleChk() {
        setTotalSelectedCheckboxes(document.querySelectorAll('input[type=checkbox]:checked').length);
    }
    useEffect(() => {
        console.log(totalSelectedCheckboxes);
    }, [totalSelectedCheckboxes]);
    return (<div>
        <div>
            <input type="checkbox" value={1} onChange={() => handleChk()} />Chk1
        </div>
        <div>
            <input type="checkbox" value={2} onChange={() => handleChk()} />Chk2
        </div>
        <div>
            <input type="checkbox" value={2} onChange={() => handleChk()} />Chk2
        </div>
    </div>);
}
export default RenderCheckboxes;

Collectives™ on Stack Overflow

Count checked checkboxes in React.js

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related