Arfey/annExample.html

## annExample.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<input id="all" type="checkbox">
<input id="man" type="checkbox">
<input id="woman" type="checkbox">

<script>
    jQuery.fn.extend({
      ann: function() {
        let $newCheckbox = $('<div>', {'class': 'checkbox'})
        let $this = $(this)

        $this.hide(); // hide origin element

        print = $this.after($newCheckbox)

        $newCheckbox.click(function() {
          $(this).toggleClass('active');

        })

        return $newCheckbox
      }
    });

    $all = $('#all').ann(); // activate plagin
    $man = $('#man').ann(); // activate plagin
    $woman = $('#woman').ann(); // activate plagin


    function checkActive() {
      setTimeout(function() {
        [$man, $woman].map((obj) => {
          if (obj.hasClass('active')) {
            $all.removeClass('active')
            return
          }
        })
    }, 0)
    }

    function checkAll() {
      [$man, $woman].map((obj) => {
          obj.addClass('active')
        })
    }

    $man.click(checkActive)
    $woman.click(checkActive)
    $all.click(checkAll)

</script>

<style>
  .checkbox {
    width: 10px;
    height: 10px;
    border: 1px solid;
    background: white;
    transition: all .3s ease-out
  }

  .checkbox.active {
    border: 1px solid green;
    background: green;
  }

</style>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	</head>
	<body>

	<input id="all" type="checkbox">
	<input id="man" type="checkbox">
	<input id="woman" type="checkbox">

	<script>
	jQuery.fn.extend({
	ann: function() {
	let $newCheckbox = $('<div>', {'class': 'checkbox'})
	let $this = $(this)

	$this.hide(); // hide origin element

	print = $this.after($newCheckbox)

	$newCheckbox.click(function() {
	$(this).toggleClass('active');

	})

	return $newCheckbox
	}
	});

	$all = $('#all').ann(); // activate plagin
	$man = $('#man').ann(); // activate plagin
	$woman = $('#woman').ann(); // activate plagin


	function checkActive() {
	setTimeout(function() {
	[$man, $woman].map((obj) => {
	if (obj.hasClass('active')) {
	$all.removeClass('active')
	return
	}
	})
	}, 0)
	}

	function checkAll() {
	[$man, $woman].map((obj) => {
	obj.addClass('active')
	})
	}

	$man.click(checkActive)
	$woman.click(checkActive)
	$all.click(checkAll)

	</script>

	<style>
	.checkbox {
	width: 10px;
	height: 10px;
	border: 1px solid;
	background: white;
	transition: all .3s ease-out
	}

	.checkbox.active {
	border: 1px solid green;
	background: green;
	}

	</style>

	</body>
	</html>