SOCIALIZE IT

Thursday 3 October 2013

Add Remove Class Onclick For Checkbox AND jQuery addClass() Method

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>button demo</title>
<style>
.is-checked { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<div class="fix_header">
<div class="test"> Add Remove Class </div>
<input type="checkbox" id="check">
</div>
<script>
$(window).load(function(){
    $('#check').attr('checked',false);
})
$(function () {
  $('.fix_header > input[type="checkbox"], input[type="radio"]').each(function () {
    $(this).on('click', function () {
      $(this).parent().wrap('<div>').unwrap(); 
        // works great for checkboxes, but not for radios
        if ($(this).prop('checked')) {
          
          $('div.test').addClass('is-checked');
        } else {
          $('div.test').removeClass('is-checked');
        }
    })
  })
})
</script>
</body>
</html>

-----------------------------------------------------------------

checkbox id display none

-----------------------------------------------------------------
<script src="http://code.jquery.com/jquery.js"></script>

<script>
jQuery(document).ready(function () {
   
    $('input.pokazkontakt').each(function(){
        if ($(this).is(':checked')) {
            $(this).parent().nextAll('.pkbox:first').css('display', 'none');
        } else {
            $(this).parent().nextAll('.pkbox:first').css('display', 'block');   
        }
    });

    $('input.pokazkontakt').click(function () {
        $(this).parent().nextAll('.pkbox:first').toggle('fast');
    });
});
</script>

<title>Checked Box</title>
</head>
<body>

 <h3><input type="checkbox" checked="checked" class="pokazkontakt">Bla bla</h3>
 <div class="pkbox">bla bla</div>
-----------------------------------------------------------------


-----------------------------------------------------------------

jQuery addClass() Method

-----------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".button").click(function(){
    $("#div1").addClass("important blue");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
display:none;
}
</style>
</head>
<body>

<div id="div1">This is some text.</div>
<div id="div2">This is some text.</div>
<br>
<div class="button">Button</div>

</body>
</html>