顯示只有當它被選中

我想顯示覆選框，如果它被選中的複選框，我的剃刀以下顯示只有當它被選中

@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 - 它顯示覆選框

但我希望複選框保持可見，如果它被選中。

可能嗎？請提供任何建議。

乾杯

來源

2017-10-20 aliusman

可能要使用'：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; 
    }

來源

2017-10-20 08:08:28 delinear

嘗試像這樣用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>

來源

2017-10-20 08:11:30 Znaneswar

顯示只有當它被選中

回答

相關問題