# Changing row color on checkbox click **URL:** \ **Category:** Rails\ **Created:** [December 30, 2008, 1:34am UTC](https://www.ruby-forum.com/t/changing-row-color-on-checkbox-click/156560 "2008-12-30T01:34:11Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![skirkpatrick](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/73ab20/32.png) [@skirkpatrick](https://www.ruby-forum.com/u/skirkpatrick)\ **Post date:** [December 30, 2008, 1:34am UTC](https://www.ruby-forum.com/t/changing-row-color-on-checkbox-click/156560/1 "2008-12-30T01:34:11Z")
say for example i had something simple like this in a view: \<%= check\_box\_tag(:task) %\> how would i add onclick to change the row color on a check and when the check is removed? maybe something like this? page[task].addClassName(‘complete’) i’m not that familiar with javascript so i’m not sure how i would finish this. thanks! ---
**Author:** ![skirkpatrick](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/73ab20/32.png) [@skirkpatrick](https://www.ruby-forum.com/u/skirkpatrick)\ **Post date:** [December 30, 2008, 1:59am UTC](https://www.ruby-forum.com/t/changing-row-color-on-checkbox-click/156560/2 "2008-12-30T01:59:35Z")
Scott K. wrote: > i’m not that familiar with javascript so i’m not sure how i would finish > this. thanks! \<%= check\_box\_tag :task, 1, false, :onchange =\> “$(parentNode.parentNode).toggleClassName(‘complete’)” %\> – Rails Wheels - Find Plugins, List & Sell Plugins - [http://railswheels.com](http://railswheels.com) ---
**Author:** ![skirkpatrick](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/73ab20/32.png) [@skirkpatrick](https://www.ruby-forum.com/u/skirkpatrick)\ **Post date:** [December 30, 2008, 2:14am UTC](https://www.ruby-forum.com/t/changing-row-color-on-checkbox-click/156560/3 "2008-12-30T02:14:05Z")
Mark Reginald J. wrote: > Scott K. wrote: > > > i’m not that familiar with javascript so i’m not sure how i would finish > > this. thanks! > > \<%= check\_box\_tag :task, 1, false, > :onchange =\> “$(parentNode.parentNode).toggleClassName(‘complete’)” %\> > > – > Rails Wheels - Find Plugins, List & Sell Plugins - > [http://railswheels.com](http://railswheels.com) perfect! thank you so much mark! ---
**Author:** ![skirkpatrick](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/73ab20/32.png) [@skirkpatrick](https://www.ruby-forum.com/u/skirkpatrick)\ **Post date:** [December 30, 2008, 5:17am UTC](https://www.ruby-forum.com/t/changing-row-color-on-checkbox-click/156560/4 "2008-12-30T05:17:19Z")
Scott K. wrote: > Mark Reginald J. wrote: > > > Scott K. wrote: > > > > > i’m not that familiar with javascript so i’m not sure how i would finish > > > this. thanks! > > > > \<%= check\_box\_tag :task, 1, false, > > :onchange =\> “$(parentNode.parentNode).toggleClassName(‘complete’)” %\> > > > > – > > Rails Wheels - Find Plugins, List & Sell Plugins - > > [http://railswheels.com](http://railswheels.com) > > perfect! thank you so much mark! oops spoke a little too soon. the highlighting works great on firefox 3 but for some reason it acts a little weird on IE7. the first check box i click doesn’t do anything but then if i click another check box the first check box row gets highlighted. any idea what could be causing the incompatibility with IE? ---
**Author:** ![skirkpatrick](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/73ab20/32.png) [@skirkpatrick](https://www.ruby-forum.com/u/skirkpatrick)\ **Post date:** [December 30, 2008, 5:34am UTC](https://www.ruby-forum.com/t/changing-row-color-on-checkbox-click/156560/5 "2008-12-30T05:34:49Z")
On Mon, Dec 29, 2008 at 11:17 PM, Scott K. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: > > > > > another check box the first check box row gets highlighted. > > any idea what could be causing the incompatibility with IE? Try adding `this`: \<%= check\_box\_tag :task, 1, false, :onchange =\> “$(this.parentNode.parentNode).toggleClassName(‘complete’)” %\> ## – Training by Collective Idea: Ruby on Rails training in a vacation setting [http://training.collectiveidea.com](http://training.collectiveidea.com) – San Antonio, TX – Jan 20-23 ---
**Author:** ![skirkpatrick](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/73ab20/32.png) [@skirkpatrick](https://www.ruby-forum.com/u/skirkpatrick)\ **Post date:** [December 30, 2008, 7:13am UTC](https://www.ruby-forum.com/t/changing-row-color-on-checkbox-click/156560/6 "2008-12-30T07:13:16Z")
Scott K. wrote: > but they all produce the same weird result where they don’t update until > i click a second time. first click always does nothing. finally got it. it was the :onchange that was causing some issues. i changed it to :onclick and all methods are now working with IE7. thanks again everyone! ---
**Author:** ![skirkpatrick](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/73ab20/32.png) [@skirkpatrick](https://www.ruby-forum.com/u/skirkpatrick)\ **Post date:** [December 30, 2008, 7:05am UTC](https://www.ruby-forum.com/t/changing-row-color-on-checkbox-click/156560/7 "2008-12-30T07:05:08Z")
Brandon K. wrote: > On Mon, Dec 29, 2008 at 11:17 PM, Scott K. > [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: > > > > > > > > > another check box the first check box row gets highlighted. > > > > any idea what could be causing the incompatibility with IE? > > Try adding `this`: > > \<%= check\_box\_tag :task, 1, false, > :onchange =\> > “$(this.parentNode.parentNode).toggleClassName(‘complete’)” %\> > > ## – > > Training by Collective Idea: Ruby on Rails training in a vacation > setting > [http://training.collectiveidea.com](http://training.collectiveidea.com) � San Antonio, TX � Jan 20-23 same thing ☹ i found some info here: [http://dev.rubyonrails.org/ticket/11078](http://dev.rubyonrails.org/ticket/11078) and the link they reference [http://prototypejs.org/learn/extensions...there](http://prototypejs.org/learn/extensions...there) is a bit at the bottom: // this will error out in IE: $(‘someElement’).parentNode.hide() // to make it cross-browser: $($(‘someElement’).parentNode).hide() so…i tried these ways: $(this.parentNode.parentNode).toggleClassName(‘complete’) $($(this).parentNode.parentNode).toggleClassName(‘complete’) $($(‘make\_step18’).parentNode.parentNode).toggleClassName(‘complete’) make\_step18 is the id of checkbox i was testing. but they all produce the same weird result where they don’t update until i click a second time. first click always does nothing.