鼠标悬停时显示复选框为表格中的每个单元格显示答案

【问题标题】：Show checkbox on mouseover shows for every cell in table鼠标悬停时显示复选框为表格中的每个单元格显示
【发布时间】：2017-07-01 10:49:19
【问题描述】：

我有一个表格（如下所示），其中每个单元格都有一个复选框，在用户将鼠标悬停在该单元格上之前该复选框是隐藏的。如果复选框被选中，它将在鼠标离开单元格时保持显示，否则复选框将再次隐藏。

我的问题是我不知道如何为用户当前悬停的单个单元格显示复选框。此时，将鼠标悬停在任何单元格上都会显示每个复选框，如下所示：

我对单元格设置位置的看法：

@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：

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

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

CSS：

.hideCheckBox {
    display: none;
}

我的脚本有误，但我不知道如何修复以处理单个单元格。

【问题讨论】：

您是否尝试使用$(this).find(".hideCheckBox").eq(0) 而不是$(".hideCheckBox") ？
这个行为不需要用JS来实现，下面用纯CSS查看我的回答。

标签： javascript html css asp.net-mvc checkbox

【解决方案1】：

您无需使用 javascript 即可轻松实现此目的。只需将input type="checkbox"的默认display设置为none，当td为:hovered，或者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>

【讨论】：

感谢您的回答，似乎是最好的方法。所有其他答案也很好，谢谢大家。
谢谢@Spitfire5793，如果它对你有帮助，点赞也是让其他人知道它的好方法 :-) 祝你好运...

【解决方案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

试试这个

你可以给display : inline或display : inline-block，而不是display : block。

【讨论】：

【解决方案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();
        });

我希望这会奏效

【讨论】：