How to change background -color when toggle button clicked?

Question

I need help :

i've got a problem when clicking any toggle button i want it to change background-color and when clicked again it must return to original background-color . your help will be highly appreciated.

function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
    return '\n<input ' 
            + (tbID ? ' id=\'' + tbID + '\'' : '')
            + (tbClass ? ' class=\'' + tbClass + '\'' : '')
            + (tbType ? ' type=\'' + tbType + '\'' : '')
            + (tbValue ? ' value=\'' + tbValue + '\'' : '')
            + (onClick ? ' onclick=\'' + onClick + '\'' : '')
            + '>';
}
function DisplayButtons(cableData) {
    var newContent = '';
    $.each(cableData,

    function (i, item) {
        function toggle() {
            $(this).clicked ? $("#tb").addClass("btnColor") : $(this).removeClass("btnColor");
            $("#tb").toggleClass("btnColorR");
        }
        newContent += createButtons("tb" + item.CommonCable, null, "submit", item.CommonCable,
            ' alert("clicked")');
    });
    $("#Categories").html(newContent);
}

Here is an answer, it's pretty standart jquery api. http://stackoverflow.com/a/3337649/1347177 — Felix, Feb 08 '13 at 07:54
Seen your comment about @tuan answer. Your question is not clear. Edit it. What do you want **EXACTLY**? And your are creating `submit` buttons. Why? Are they submitting something? I suppose not, since you want to change a color when clicking them. Please, be more clear if you want help. — Byscripts, Feb 08 '13 at 08:33

Tuan · Answer 1 · 2013-02-08T14:39:55.967

You'll need a click event listener on your button. Whenever the button is clicked, the toggleClass() will switch between the class normal and active, each containing a different background color.

Based on your comments, it appears you're creating these buttons dynamically from values in a database, so you won't know the id of the button beforehand. For this situation, instead of creating a click event listener for a specific button (referencing the id), create the event for all buttons on your page $('input[type=button]').click(function () {....

HTML:

<!-- 
    These buttons were generated dynamically from values stored in a database 
    I won't know their ids
-->
<input type="button" name="btn_1_from_db" value="Toggle Color1" />    
<input type="button" name="btn_2_from_db" value="Toggle Color2" /> 
<input type="button" name="btn_3_from_db" value="Toggle Color3" /> 
<input type="button" name="btn_4_from_db" value="Toggle Color4" /> 

<div id="target" class="normal">
   My color will change
</div>

CSS

.normal {
    background-color: green;
}

.active {
   background-color: red;
}

Javascript:

$(document).ready(function () {

    // If any button is clicked, toggle its assigned class (changes the color)
    $('input[type=button]').click(function () {
        $('#target').toggleClass('active');
    });
});

Example: http://jsfiddle.net/EkAAh/

and Rohan im sorry guys i ddnt mention that my toggle button is created onLoad from database. my main problem i dont know how can i get an ID of each and every button created.so that i can use that ID property for my CCS page toggle button i created — Bonesh, Feb 08 '13 at 08:11
@ByScripts I have a JavaScript page that creates toggle buttons when the page loads, but i cannot use those buttons independently now because the id of the button is a column name on my database table. so i cannot know it beforehand, that is why i cannot assign a method or function on each button. Please check the code i uploaded for more details. — Bonesh, Feb 08 '13 at 08:43
I updated my answer to address your comments. As @ByScripts suggested, you should really update your original question to include what you wrote in your comment. Your original question is not very clear and can be improved. This will help others with a similar question, find the answer easier. Not to mention, it will also help others answer your question better. — Tuan, Feb 08 '13 at 14:45

Rohan Kumar · Answer 2 · 2013-02-08T07:57:14.973

Try your code like

function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
    return '\n<input ' 
            + (tbID ? ' id=\'' + tbID + '\'' : '')
            + (tbClass ? ' class=\'' + tbClass + '\'' : '')
            + (tbType ? ' type=\'' + tbType + '\'' : '')
            + (tbValue ? ' value=\'' + tbValue + '\'' : '')
            + (onClick ? ' onclick=\'toggle(this);' + onClick + '\'' : '')
            + '>';
}
function toggle(ths) {
    $(ths).toggleClass("btnColor");
    $("#tb").toggleClass("btnColorR");
}
function DisplayButtons(cableData) {
    var newContent = '';
    $.each(cableData,

    function (i, item) {
        newContent += createButtons("tb" + item.CommonCable, null, "submit", item.CommonCable,
            ' alert("clicked")');
    });
    $("#Categories").html(newContent);
}

How to change background -color when toggle button clicked?

2 Answers2