选中复选框时，asp .net页面会更改标签的背景颜色

Question

选中复选框后，尝试更改复选框标签的背景颜色。我可以使用这个方法http://jsfiddle.net/CjpmP/来做到这一点，但我可以找到如何使用@html.checkbox和我需要使用的方法的标签。这就是我所拥有的

<style type="text/css">
    .checkyoself{
        display: none;
    }

    .checkyoself:checked + .label1{
        background-color: green;
    }

    .label1 {
        width: 240px;
        height: 140px;
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 5px;
        color: #ffffff;
        background-color: #9e00f2;
        float: left;
    }
</style>


@{

    var j = 0;
    using (Html.BeginForm("GroceryList", "RecipeIngredient", FormMethod.Post))
    {
        for (int i = 0; i < @Model.RecipeItems.Count; i++)
        {

            var name = "check_" + j;
            @Html.CheckBoxFor(itemModel => itemModel.RecipeItems[i].IsChecked, new { id = @name, @class="checkyoself" })
            <label for=@name class="label1">@Model.RecipeItems[i].Recipe.Title</label>
            @Html.HiddenFor(itemModel => itemModel.RecipeItems[i].Recipe.Title)
            j++;
        }
    }
}

Answer 1

试试我制作的fiddle：

.check-with-label:checked + .label-for-check {
  background-color:Red;
    color:white;
    border-style:double;
   }

只需使用border属性即可使用背景颜色属性。