最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Show checkbox on mouseover shows for every cell in table - Stack Overflow

programmeradmin2浏览0评论

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
Add a ment  | 

3 Answers 3

Reset to default 5

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>

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

发布评论

评论列表(0)

  1. 暂无评论