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.
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.
Share Improve this question edited Feb 13, 2017 at 13:30 M Hamza Javed 1,2654 gold badges18 silver badges32 bronze badges asked Feb 13, 2017 at 12:39 Spitfire5793Spitfire5793 3913 silver badges16 bronze badges 2-
did you try to put
$(this).find(".hideCheckBox").eq(0)
instead of$(".hideCheckBox")
? – Banzay Commented Feb 13, 2017 at 12:42 - There is no need to use JS to achieve this behavior, check my answer below using pure CSS. – Ronen Cypis Commented Feb 13, 2017 at 12:47
3 Answers
Reset to default 5You 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 :hover
ed, 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>
https://jsfiddle/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
.
$('.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