I am currently trying to add multiple classes from a variable created when the user selects checkboxes to an element using $('.element').attr but this doesn't seem to be working so far - this method seems to be only getting the first class in the array, .addClass works only to add the classes and not remove them.
Is there any workaround to this?
The Code used is:
$('.ms-drop').on('change', function(){
var val = [];
var selectedItem = $(this).find('input').attr('value');
//get the values of each checked checkbox
$(this).find('li > label > input:checked').each(function(i){
val[i] = $(this).val();
});
var new_class = val.join(' ');
console.log(new_class);
$('.editable').attr('class', new_class);
$('.writeHere').html(new_class);
});
Please see the link below to see it working:
Any help will be greatly appreciated!
I would listen to the input onchange instead and just use toggleClass:
$('.ms-drop input[type="checkbox"]').on('change', function(){
$('.editable').toggleClass($(this).val());
$('.editable').html($('.editable').attr('class')); // for debug purposes
});<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<section class="ms-drop">
<ul>
<li>
<label>
<input type="checkbox" value="Class1">
</label>
</li>
<li>
<label>
<input type="checkbox" value="Class2">
</label>
</li>
<li>
<label>
<input type="checkbox" value="Class3">
</label>
</li>
<li>
<label>
<input type="checkbox" value="Class4">
</label>
</li>
</ul>
</section>
<div class="editable">
Class: <span class="writeHere">Hehe</span>
</div>
</body>
</html>EDIT If other code can change the style of .editable as @Roamer-1888 mentions, you can test the checked state of the box and decide to add or remove, rather than just toggle (although anything else changing the classes would make the checkboxes out of sync anyway which is a functional bug in itself):
$('.ms-drop input[type="checkbox"]').on('change', function(){
if($(this).is(':checked'))
$('.editable').addClass($(this).val());
else
$('.editable').removeClass($(this).val());
$('.editable').html($('.editable').attr('class')); // for debug purposes
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments