Show flag on mouse readings for each table cell

Question

I have a table (shown below) where each cell has a checkbox that is hidden until the user goes over that cell. If the checkbox is selected, it will be displayed when the mouse leaves the cell, otherwise the flag will be hidden again.

The problem is that I don’t know how to check the box for the individual cell that the user is currently soaring. At the same moment, a mouse over any cell will show each flag:

My idea of ​​where the cells are installed:

@for (int i = 0; i < Model.Users.Count(); i++) {
    <tr>
         @for (int j = 0; j < Model.Users.Count(); j++) {
             string background = Model.AssignedArray[i] == j ? "background-color:#157fa0" : null;
             string text = Model.AssignedArray[i] == j ? "color:#ffffff" : null;
             <td class="tableCell" style="text-align: center; @background; @text">
                 @Model.Matrix[i, j]
                 <input type="checkbox" class="hideCheckBox" name="forcedAssigned" value="">
             </td>
          }
      </tr>

JavaScript for checkboxes:

<script>
    $('.tableCell')
        .mouseenter(function () {

            $(".hideCheckBox").show();
        })
        .mouseleave(function () {
            if ($(".hideCheckBox").is(":checked"))
                $(".hideCheckBox").show();
            else
                $(".hideCheckBox").hide();
        });
</script>

CSS

.hideCheckBox {
    display: none;
}

My script is wrong, but I don’t know how to fix work with individual cells.

Answer 1

, javascript . display display none, td - :hover ed, input type="checkbox" - :checked, display, :

td {
  border: solid 1px red;
  margin: 5px;
  width: 40px;
  height: 40px;
}

td input { display: none; }

td:hover input { display: inline; }

td input:checked {display: inline; }

<table>
  <tr>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
  </tr>
  <tr>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
  </tr>
  <tr>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
  </tr>
  <tr>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
    <td><input type ="checkbox" /></td>
  </tr>
</table>

Answer 2

$('.tableCell')
        .mouseenter(function () {

            $(this).find(".hideCheckBox").show();
        })
        .mouseleave(function () {
            if ($(this).find(".hideCheckBox").is(":checked"))
                $(this).find(".hideCheckBox").show();
            else
                $(this).find(".hideCheckBox").hide();
        });

,

Answer 3

https://jsfiddle.net/ganesh16889/62h554av/

<table border="1">
    <tr>
        <td>
            <input type="checkbox" /> Check 01
        </td>
        <td>
            <input type="checkbox" /> Check 02
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" /> Check 03
        </td>
        <td>
            <input type="checkbox" /> Check 04
        </td>
    </tr>
</table>

input[type="checkbox"] { display : none; } 
// Keep the checkboxes hidden first.
td:hover input[type="checkbox"] { display : block; } 
// when mouse over, shows the checkbox of the hovered td and on mouse leave hide it.
input[type="checkbox"]:checked { display : block; } 
// when checkbox is checked, it keeps it shown

try it

instead display : blockyou can specify display : inlineor display : inline-block.