CSS to achieve click-to-select effect

The renderings are as follows:

 Click the cell to select the element, add an orange background, and add a check mark in the lower right corner of the cell. Click the selected element again to deselect the effect. code show as below:

html code:

<table class="table table-bordered" id="tblField"  style="border-collapse:collapse;">
          <tbody id="tbField">
                <tr>
                  <td>Tanmay</td>
                  <td>Bangalore</td>
                  <td>560001</td>
                </tr>
                <tr>
                  <td>Sachin</td>
                  <td>Mumbai</td>
                  <td>400003</td>
                </tr>
                <tr>
                  <td>Uma</td>
                  <td>Pune</td>
                  <td>411027</td>
                </tr>
          </tbody>
</table>

css code:

<style>
      #tblField td{
      border:1px solid #ccc;
      cursor:pointer;
      position: relative;
      }
      #tblField td:hover{
      background-color:#ED7101;
      }
      .activeStyle{
      background-color:#ED7101;
      }
      .correct:before {
      content:"\2714";
      font-size:14px;
      color: white;
      position: absolute;
      top:15px;
      right:0;
      }
 </style>

js code:

//选择某个字段
function CheckedField(obj) {
    $(obj).toggleClass("activeStyle correct");//背景色切换
}