How to apply my class from css to checkbox? [duplicate]


Tags: javascript,jquery,css

Problem :

This question already has an answer here:

I have this working code but why the checkbox is not affecting it?.

$("#btn").click(function() {
  if ($("#txt2").val() == 2) {
    alert("Hello");
    $("#txt").removeClass('validation');
    $("#chk").removeClass('validation');
  } else {
    $("#txt").addClass('validation');
    $("#chk").addClass('validation');
  }
});
.validation {
  border: 1px solid #ff0000;
  background-color: #ffeeee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <input type="checkbox" id="chk">
    <input type="text" id="txt">
  </td>
</tr>
<input type="text" id="txt2">
<input type="button" id="btn" value="Click">

Anyone know about this issue or problem?.



Solution :

Your checkbox is getting the class (you can tell in the DOM inspector); you don't see the styling because the checkbox border isn't shown.

Some of the answers to this question suggests using outline rather than border for checkboxes; see the new style rule in the example below.

$("#btn").click(function() {
  if ($("#txt2").val() == 2) {
    alert("Hello");
    $("#txt").removeClass('validation');
    $("#chk").removeClass('validation');
  } else {
    $("#txt").addClass('validation');
    $("#chk").addClass('validation');
  }
});
.validation {
  border: 1px solid #ff0000;
  background-color: #ffeeee;
}
input[type=checkbox].validation {
  outline: 1px solid #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <input type="checkbox" id="chk">
    <input type="text" id="txt">
  </td>
</tr>
<input type="text" id="txt2">
<input type="button" id="btn" value="Click">


    CSS Howto..

    How to align a div to lower left corner in css

    How can I use CSS to code a 3-sided box (no left side) with rounded corners and a shadow?

    How to align this bootstrap radio button?

    How can I create the shape of side mirrors of a truck/lorry?

    CSS how to solve -webkit- functions

    How to add php to wordpress form

    How to apply first-child:first-letter to only one section?

    How to align a Wordpress navigation bar to the right of a logo?

    How to Find and replace class with javascript (No JQ)

    Jquery slideshow - time on initial image

    How to append an
  • to a
      and set css on the
    • at the same time with jquery
  • How to remove hover effect from a column of a table

    How to create CSS for round, responsive, bootstrap button with border? Border is affecting pixels

    How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

    How to write CSS keyframes to indeterminate material design progress bar

    How to silently hide “Image not found” icon when src source image is not found

    how to align button radio in css

    How to put text on top of a pattern overlay CSS

    How to restrict Visual Studio 2012.2 from generating .css files in LESS editor?

    How to make read more option with html/CSS?

    How to Indent using HTML or CSS

    How do I let the DOM know about new elements created on the fly?

    CSS: How to limit horizontal/vertical scrolling?

    How to shift a background image with css

    CSS How to Properly use ems instead of pixels?

    How to float all child divs to center inside a parent div?

    How to add next / previous buttons to Surface tablet touch-slideshow?

    How to make balloon textbook talking style using css

    How to adjust the top of an image and an input in the same line?

    Why are div's not staying in row and how to get them to?