Echidna Sys Test

by SriSri M

HTML

<ul class="main">
    <li><input type="checkbox" id="select_all" /> Select all</li>
    <li><input type="checkbox" id="add" /> Add</li>
    <li><input type="checkbox" id="delete" /> Delete</li>
    <ul id="sub-list">
        <li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
        <li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
        <li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
        <li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
        <li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
    </ul>
</ul>

CSS

.red {
  background-color: red;
}

JavaScript

$('#select_all').click(function(){
	if(this.checked){
  	$('.checkbox').each(function(){
    	this.checked = true;
    });
  }
  else{
  	$('.checkbox').each(function(){
    	this.checked = false;
    });
  }
});

$('.checkbox').on('click',function(){
	if($('.checkbox:checked').length == $('.checkbox').length){
  	$('#select_all').prop('checked',true);
  }
  else{
  	$('#select_all').prop('checked',false);
  }
});

$('#add').on('click',function(){
	var prompt = window.prompt("Enter Label Name");
  var inputs = $('input');
inputs.filter(function(i,el){
    return inputs.not(this).filter(function() {
        return this.value === el.value;
    }).length !== 0;
}).addClass('red');
$('#sub-list').append('<li><input type="checkbox" class="checkbox" value="'+prompt+'"/>'+prompt+'</li>');
//  $('#sub-list').append('<li><input type="checkbox" class="checkbox" value="'+prompt+'"/>'+prompt+'</li>');
});