Javascript 选中所有复选框，并取消选中在React with jQuery中是否取消选中其中任何复选框

我想选择所有

复选框

。但如果用户取消选中任何复选框，我还希望取消选中“全选”复选框

在下面的示例中，如何实现这一点

现场演示：

实时编辑器：

我查看的一些示例将

选中的
作为
项中的
布尔值
参数。但是，我的
项
对象来自
ajax
作为
json
的响应，它们没有值，例如
选中

我想用反应的方式来做这件事。不是jQuery。有什么想法吗？
一种方法是在从网络请求获得的数据中添加一个名为“
isChecked”的额外属性，并使用该属性控制所有
复选框

示例


const posts=[
{
id:1，
名称：“文本1”
},
{
id:2，
名称：“文本2”
},
{
id:3，
名称：“文本3”
}
];
类应用程序扩展了React.Component{
状态={
名称：“反应”，
员额：[]，
isAllChecked:错误
};
componentDidMount（）{
设置超时（（）=>{
这是我的国家({
posts:posts.map（post=>（{…post，isChecked:false}））
});
}, 1000);
}
handleSelect=id=>{
this.setState（prevState=>{
const posts=prevState.posts.map（post=>
post.id==id？{…post，isChecked:！post.isChecked}：post
);
const isAllChecked=posts.every（post=>post.isChecked）；
返回{posts，isAllChecked}；
});
};
handleSelectAll=（）=>{
this.setState（prevState=>{
const isAllChecked=！prevState.isAllChecked；
const posts=prevState.posts.map（post=>({
邮递
isChecked：isAllChecked
}));
返回{posts，isAllChecked}；
});
};
render（）{
const{posts，isAllChecked}=this.state；
返回(
{posts.map（fx=>(
this.handleSelect（fx.id）}
/>
))}
全选
);
}
}
类TableItem扩展了React.Component{
render（）{
const{checked，onChange，name}=this.props；
返回(
{name}
);
}
}
render（，document.getElementById（“根”））