Max Max - 5 months ago 22
Javascript Question

Color switching button with jquery

I have this example code to highlight specific cells of a table. Is there a way to switch colors or use multiple colors at the same time?

I am trying to make a button to switch the color of hightlighting. By default when a value is selected, it is highlighted in green color. I would like to have a button so that when I click, my next selection will be a different color. So every time I click this button, the next selection will be a different color. is there a simple way to achieve this?

Here is the fiddle https://jsfiddle.net/g28xasd7/ and my code:

$('.selector').each(function() {
$(this).on('click', check);
});

$('.all').each(function() {
$(this).on('click', all);
});

function all(event) {
if ($(this).is(':checked')) {
$("input:checkbox:not(:checked)", $(this).parents('form')).not(this).prop("checked", "checked");
} else {
$("input:checkbox(:checked)", $(this).parents('form')).not(this).prop("checked", "");
}

//$('.selector').prop("checked", this.name === "SelectAll");

check(event);
}

function check(event) {
var checked = $(".selector:checked").map(function() {
return this.name
}).get()
$('td').removeClass("highlight").filter(function() {
return $.inArray($(this).text(), checked) >= 0
}).addClass("highlight")
if ($(this).is(".selector"))
$('.all').not(this).prop("checked", false)
}


Or is there another way to change the color?

Answer

Pay attention to the IDs, they must be unique. Instead of class I used directly the background-color.

My snippet is:

$(function () {
  $('.selector').on('click', function(e) {
    var checked = this.name;
    var selectedColor = '';

    if (this.checked) {
      selectedColor = $('#nextColor').val();
      
      // instead if you need a random color generated automatically:
      // selectedColor = '#'+Math.floor(Math.random()*16777215).toString(16);
    }
    $('td').filter(function() {
      return this.textContent == checked;
    }).css('background-color', selectedColor);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
    <div id="sidebar1">

        <body class="twoColLiqLt">
        <div id="container1">
            <div id="sidebar11">
                <h3>Choose a color: <input id="nextColor" type="color" value="#9ac99d"> Parameters:</h3>

                <form id="form1" name="form1" method="post" action="">
                    <label>
                        <input type="checkbox" name="A" class="selector"/>A</label>
                    <label>
                        <input type="checkbox" name="B" class="selector"/>B</label>
                    <label>
                        <input type="checkbox" name="X" class="selector"/>X</label>
                    <label>
                        <input type="checkbox" name="Y" class="selector"/>Y</label>
                    <label>
                        <input type="checkbox" name="Z" class="selector"/>Z</label>

                </form>

                <form id="form2" name="form2" method="post" action="">

                    <label>
                        <input type="checkbox" name="K" class="selector"/>K</label>
                    <label>
                        <input type="checkbox" name="J" class="selector"/>J</label>
                    <label>
                        <input type="checkbox" name="M" class="selector"/>M</label>
                    <label>
                        <input type="checkbox" name="T" class="selector"/>T</label>
                    <label>
                        <input type="checkbox" name="N" class="selector"/>N</label>

                </form>
            </div>
        </div>

        <div id="mainContent">
            <h3 align="right">&nbsp;</h3>

            <div>
                <table width="200" border="1">
                    <tr>
                        <td>A</td>
                        <td>&nbsp;</td>
                        <td>M</td>
                        <td>&nbsp;</td>
                        <td>K</td>
                        <td>J</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>B</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td> X</td>
                        <td>&nbsp;</td>
                        <td>X</td>
                        <td>&nbsp;</td>
                        <td>Y</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>M</td>
                        <td>&nbsp;</td>
                        <td>T</td>
                        <td>K</td>
                        <td>&nbsp;</td>
                        <td>Z</td>
                    </tr>
                </table>
            </div>
        </div>