Show checkbox on mouseover shows for every cell in table

Question

I have a table (shown below) where each cell has a checkbox which is hidden until the user mouses over that cell. If the checkbox is checked it will stay shown when the mouse leaves the cell, otherwise the checkbox will be hidden again.

The problem I have is that I do not know how to have the checkbox show for the individual cell that the user is currently hovering over. At the minute, mousing over any cell will show every checkbox as below:

My view for where the cells are set:

@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 the check boxes:

<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 do not know how to fix to work with individual cells.

Answer 1

You can easily achieve this with no use of javascript at all. Just set the default display of the input type="checkbox" to none, and when the td is :hovered, or the input type="checkbox" is :checked, override the display property, like so:

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

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 this

instead of display : block you can give display : inline or display : inline-block.

Answer 3

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

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

I hope this will work