Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery background color of li and checkbox
    primarykey
    data
    text
    <p>I want to change the background color of li element to be changed when clicked. So when the user clicks on first li, the background color should be in red, and when he clicks second one, the second one should change to red, but the first one should go to white.</p> <p>In short, the background color of selected li should be changed to show it is highlighted.</p> <p>Also the checkbox should also be checked for only selected li. I have tried to do like below. But it is changing for all selected li's.. Please help.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="http://editor.webyana.com/javascripts/client_scripts/potential/jquery.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function () { $("li.gc").click(function () { $("li.gc").each(function (i) { $("li.gc[i]").css({ backgroundColor: '#FFA700' }); }); $(this).css({ backgroundColor: '#000000' }); $(this).children("input[type=checkbox]").attr('checked', 'checked'); //do something with the sortcat }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li class="gc"&gt; &lt;input type="checkbox" /&gt; Check1 &lt;a&gt;Link1&lt;/a&gt; &lt;/li&gt; &lt;li class="gc"&gt; &lt;div&gt; &lt;input type="checkbox" /&gt; Check2 &lt;a&gt;Link2&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="gc"&gt; &lt;div&gt; &lt;input type="checkbox" /&gt; Check3 Link3 &lt;/div&gt; &lt;/li&gt; &lt;li class="gc"&gt; &lt;div&gt; &lt;input type="checkbox" /&gt; Check4 Link4 &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload