问设置p:selectManyCheckbox的每个单独复选框的背景色

EN

.ui-selectmanycheckbox tr:nth-of-type(1) .ui-state-default {
    background-color: red;
}

.ui-selectmanycheckbox tr:nth-of-type(2) .ui-state-default {
    background-color: orange;
}

.ui-selectmanycheckbox tr:nth-of-type(3) .ui-state-default {
    background-color: red;
}

.ui-selectmanycheckbox tr:nth-of-type(4) .ui-state-default {
    background-color: orange;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+1) .ui-state-default {
    background-color: red;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+2) .ui-state-default {
    background-color: orange;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+3) .ui-state-default {
    background-color: green;
}

.ui-selectmanycheckbox tr:nth-of-type(4n+4) .ui-state-default {
    background-color: blue;
}

<h:dataTable value="#{bean.movies}" var="movie" styleClass="ui-selectmanycheckbox ui-widget">
    <h:column>
        <p:selectBooleanCheckbox id="checkbox" converter="javax.faces.Boolean"
            value="#{bean.checkedMovieIds[movie.id]}" styleClass="#{movie.type}" />
    </h:column>
    <h:column>
        <p:outputLabel for="checkbox" value="#{movie.title}" />
    </h:column>
</h:dataTable>

<p:commandButton value="Submit" actionListener="#{bean.collectMovies}" action="#{bean.submit}" />

private List<Movie> movies;
private Map<Long, Boolean> checkedMovieIds;
private List<Movie> selectedMovies;

@PostConstruct
public void init() {
    movies = populateItSomehow();
    checkedMovieIds = new HashMap<Long, Boolean>();
}

public void collectMovies(ActionEvent event) {
    selectedMovies = new ArrayList<Movie>();
    for (Movie movie : movies) {
        if (checkedMovieIds.get(movie.getId())) {
            selectedMovies.add(movie);
        }
    }
}

public void submit() {
    System.out.println(selectedMovies);
    // ...
}

// +getters (note: no setters necessary for all those three properties)

.action .ui-chkbox-box {
    background-color: red;
}

.comedy .ui-chkbox-box {
    background-color: orange;
}

.fantasy .ui-chkbox-box {
    background-color: green;
}

.horror .ui-chkbox-box {
    background-color: blue;
}

<p:selectManyCheckbox binding="#{requestScope.movieSelect}" layout="pageDirection">
    <f:selectItems value="#{bean.movies}" />
</p:selectManyCheckbox>

<script>
(function() {
    var selectName = '#{requestScope.movieSelect.clientId}';
    var kids = jQuery("input[id*="+selectName+"]");
    var index = 0;

    <ui:repeat value="#{bean.movies}" var="movie">
        jQuery(kids[index++]).parent().next().css('background-color', '#{movie.description}');
    </ui:repeat>
}());
</script>

public class Bean {

    private List<SelectItem> movies = Arrays.asList(
            new SelectItem("Scarface", "Scarface", "green"),
            new SelectItem("Goodfellas", "Goodfellas", "red"),
            new SelectItem("Godfather", "Godfather", "blue"),
            new SelectItem("Carlito's Way", "Carlito's Way", "yellow"));

    public List<SelectItem> getMovies() {
        return movies;
    }
}

.ui-chkbox-box {
    background-image : none;
}