如果选中check_box，如何更改索引中的字体颜色？

Question

If the user checks off :good in the _result_fields.html.erb how can we change the :result_value & :date_value font color to green in the index?

This is to give the user a visual reference for his quantified :results overtime.

For example:

Averaged
Meditated (min)
1.4 Dec 2014
1.8 Jan 2015***
2.1 Feb 2015***
1.8 Mar 2015
  *** represents green font color. The User would have checked :good for these results in the form to make them green in the index.

Results being a nested attribute of quantifieds.

 class Result < ActiveRecord::Base belongs_to :user belongs_to :quantified default_scope { order('date_value DESC') } scope :good, -> { where(good: true) } scope :bad, -> { where(good: false) } end 

_result_fields.html.erb

 <div class="nested-fields"> <div class="form-group"> <%= f.text_field :result_value, class: 'form-control', placeholder: 'Enter Result' %> <br/> <%= f.date_select :date_value, :order => [:month, :day, :year], :with_css_classes => true, :class => "modular-date-field" %> <b><%= link_to_remove_association "Remove Result", f %></b> <div class="america3"> <label> Good: </label> <%= f.check_box :good %> </div> </div> </div> 

Quantifieds controller

 class QuantifiedsController < ApplicationController before_action :set_quantified, only: [:show, :edit, :update, :destroy] before_action :logged_in_user, only: [:create, :destroy] def index if params[:tag] @quantifieds = Quantified.tagged_with(params[:tag]) else @quantifieds = Quantified.joins(:results).all @averaged_quantifieds = current_user.quantifieds.averaged @instance_quantifieds = current_user.quantifieds.instance end end 

quantifieds/index.html.erb

 <script> window.fbAsyncInit = function() { FB.init({ appId : '1540372976229929', xfbml : true, version : 'v2.2' }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <!-- Default bootstrap panel contents --> <div id="valuations" class="panel panel-default"> <div class="panel-heading"><h4><b>AVERAGE</b></h4></div> <% @averaged_quantifieds.each do |averaged| %> <div class="attempt"> <b><%= raw averaged.tag_list.map { |t| link_to t.titleize, tagquantifieds_path(t) }.join(', ') %> <%= link_to edit_quantified_path(averaged) do %> (<%= averaged.metric %>)</b> <% end %> <div class="red"> <ul> <% averaged.results.each do |result| %> <li> <b><%= result.result_value %></b>&nbsp;&nbsp; <%= result.date_value.strftime("%b %Y") %> </li> <% end %> </ul> </div> </div> <% end %> </div> <div class="valuations-button"> <%= link_to new_quantified_path, class: 'btn' do %> <b><span class="glyphicon glyphicon-plus"</span></b> <% end %> </div> <div class="fb-like" data-share="true" data-width="450" data-show-faces="true"> </div> <br> <!-- Default bootstrap panel contents --> <div id="valuations" class="panel panel-default"> <div class="panel-heading"><h4><b>INSTANCE</b></h4></div> <% @instance_quantifieds.each do |instance| %> <div class="attempt"> <b><%= raw instance.tag_list.map { |t| link_to t.titleize, tagquantifieds_path(t) }.join(', ') %> <%= link_to edit_quantified_path(instance) do %> (<%= instance.metric %>)</b> <% end %> <div class="red"> <ul> <% instance.results.each do |result| %> <li> <%= result.date_value.strftime("%b.%d.%y") %> &nbsp;&nbsp; <%= result.result_value %> </li> <% end %> </ul> </div> </div> <% end %> </div> <div class="valuations-button"> <%= link_to new_quantified_path, class: 'btn' do %> <b><span class="glyphicon glyphicon-plus"</span></b> <% end %> </div> 

Thank you so much for your time!

Answer 1

you can use checked :

input[type=checkbox]:checked + label {
  color: red;
}

Live Demo

you can style whatever rule you want when the check box get checked

of course make sure your are not trying to select a parent element, there is no way to select a parent with CSS only