Question

我想显示复选框，如果选中它，我的剃刀是以下

@foreach (var I in Model)
{
 <tr id="row_@I._id">
  <td class="v-align-top" id="Checkboxcard">
   <div class="checkbox text-center" id="checkboxDIV">
     <input type="checkbox" value="@I._id" id="checkbox_@I._id)">
      <label for="checkbox_@I._id"></label>
   </div>
  </td>
 </tr>
}

我的样式表有这个

 #checkboxDIV {
        visibility: hidden;
    }

    #Checkboxcard:hover #checkboxDIV {
        visibility: visible;
    }

当我将鼠标移到#Checkboxcard上时 - 显示复选框

但是如果选中复选框，我希望复选框保持可见。

有可能吗？请给我任何建议。

干杯

Answer 1

这将监视复选框状态的更改并在包装器上追加/删除可见性类（使用与悬停相同的样式）：

// Javascript:
    $('#checkboxDIV input').on('change',function() {
      $(this).is(':checked') ? $(this).parent.addClass('visible') : $(this).parent.removeClass('visible');
    });

// CSS    
    #Checkboxcard:hover #checkboxDIV, .visible {
      visibility: visible;
    }

正如其他地方所指出的那样 - 如果你计划在一个循环中输出这个的多个部分，你会想要将这些ID更改为类，因为id在HTML中应该是唯一的，你不要＆＃39 ; t在一个页面上想要多个#checkboxDIV：

//html

@foreach (var I in Model)
{
 <tr id="row_@I._id">
  <td class="v-align-top Checkboxcard">
   <div class="checkbox text-center checkboxDIV">
     <input type="checkbox" value="@I._id" id="checkbox_@I._id)">
      <label for="checkbox_@I._id"></label>
   </div>
  </td>
 </tr>
}

// Javascript:
    $('.checkboxDIV input').on('change',function() {
      $(this).is(':checked') ? $(this).parent.addClass('visible') : $(this).parent.removeClass('visible');
    });

// CSS    
    .Checkboxcard:hover .checkboxDIV, .visible {
      visibility: visible;
    }

Answer 2

使用css

尝试这样的事情

＆＃13;

    input[type=checkbox]{
      opacity: 0;
    }
    #Checkboxcard:hover input[type=checkbox]{
      opacity: 1;
    }

    input[type=checkbox]:checked{
      opacity: 1;
    }

＆＃13;

    <div id = "Checkboxcard">
     <input type="checkbox" > Hover me<br>
    </div>

＆＃13;

仅在选中时显示复选框

2 个答案: