onclick function in react-grid-layout to get checkbox checked

In react-grid-layout i am displaying name,image and a checkbox. The checkbox will be checked by default. The thing i want to do is onClicking the grid I want to change the checkbox status, here onCellClick() function is not working. Here is the code

var Student= React.createClass({
  getDefaultProps:function() {
    return {
      className: "layout",
      rowHeight: 16,
      cols: 16,
      width:1200,
      isDraggable: false,
      isResizable:false,
      verticalCompact:false
    };
  },
  onCellClick:function(){
  if(document.getElementById("stdattendance").checked==false){
  document.getElementById("stdattendance").checked=true;
  }else{
  document.getElementById("stdattendance").checked=false;
  }
  },
  generateDOM:function() {
  console.log(this.props.student+_.range(this.props.items)+new Array(this.props.student));
  var clickfun=this.click;
      return _.map(this.props.student, function(item, i) {
      var keyint=item.id;
      idval.push(item.id);
      var checkid=item.id+"-id";
      var divid=item.id+"-id";
      console.log("key"+keyint+idval);
      console.log("x after : " + i * 2 % 16);
      console.log("y after : " + Math.floor(i / 8) * 8);
      return (<div key={i} id={divid} onClick={this.onCellClick} data-grid=><span className="group-class1"> {item.name}</span> 
      <div id="check">
      <input type="checkbox" id="stdattendance" name="stdattendance" checked/>
      </div>
      <Image src="../images/No_image.png"/>
      </div>);     
      });

  },
  render: function() {
    // This prints the correct data

    console.log(this.props.student);
    return (
    <div>
    {(this.props.student.length)?
      <div>
    <ReactGridLayout 
          {...this.props}>

     {this.generateDOM()}
      </ReactGridLayout>
     </div>:""
      }
      </div>
         );
    }
});