显示只有当它被选中

问题描述：

我想显示复选框，如果它被选中的复选框，我的剃刀以下显示只有当它被选中

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

我的样式表有这个

#checkboxDIV { 
     visibility: hidden; 
    } 

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

当我将我的鼠标移到#Checkboxcard - 它显示复选框

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

可能吗？请提供任何建议。

干杯

可能要使用'：checked'？ – cometguy

如何检查隐藏的复选框？悬停在隐藏的复选框上并不便于使用 – guradio

您的代码遇到了多个问题，checkboxDIV和Checkboxcard都会在您的循环中重复出现id，因此ID始终应该是唯一的。 –

答

这将监视更改的复选框状态，并追加/在包装删除知名度类（使用相同的样式，悬停）：

// 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改为class，因为id在HTML中应该是唯一的，你不希望在一个页面上有多个#checkboxDIVs：

//html 

@foreach (var I in Model) 
{ 
<tr id="[email protected]_id"> 
    <td class="v-align-top Checkboxcard"> 
    <div class="checkbox text-center checkboxDIV"> 
    <input type="checkbox" value="@I._id" id="[email protected]_id)"> 
     <label for="[email protected]_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; 
    }

答

尝试像这样用CSS

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

 
    input[type=checkbox]:checked{ 
 
     opacity: 1; 
 
    }

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

显示只有当它被选中

相关推荐