I wanted to add & remove (Multiple values) of the input to tag on the click event of checkbox. done the code for single items, please help me to do for getting multiple values.
$(document).ready(function() {
$('input').click(function() {
var selectedval = $(this).val();
$('h3').text(selectedval);
});
});
ul {
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<h3>Select</h3>
<ul>
<li><label><input type="checkbox" value="List Item1"/>List Item1</label></li>
<li><label><input type="checkbox" value="List Item2"/>List Item2</label></li>
<li><label><input type="checkbox" value="List Item3"/>List Item3</label></li>
<li><label><input type="checkbox" value="List Item4"/>List Item4</label></li>
<li><label><input type="checkbox" value="List Item5"/>List Item5</label></li>
</ul>
</div>
http://jsfiddle.net/anadmin7776/6yo2dbxj/22/
CodePudding user response:
Check this example. I'm not sure if that's what you're asking.
$(document).ready(function() {
$('input').click(function() {
var selectedval = function() {
let v = [];
$('input:checked').each(function(i, el) {
v.push(el.value);
});
return v.join(', ');
};
$('h3').text(selectedval);
});
});
ul {
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<h3>Select</h3>
<ul>
<li><label><input type="checkbox" value="List Item1"/>List Item1</label></li>
<li><label><input type="checkbox" value="List Item2"/>List Item2</label></li>
<li><label><input type="checkbox" value="List Item3"/>List Item3</label></li>
<li><label><input type="checkbox" value="List Item4"/>List Item4</label></li>
<li><label><input type="checkbox" value="List Item5"/>List Item5</label></li>
</ul>
</div>
CodePudding user response:
I suggest accumulating the values in a loop over the checked inputs. This results in the selected values being displayed in list order. If that's not the goal, the other solutions may be better.
Note that I switched to the change
event for better performance.
$(document).ready(function() {
$('.selector input').change(function() {
let headingString = '';
$('.selector input:checked').each((i, el) => {
headingString = headingString ' ' el.value;
});
$('#banner-message h3 span').text(headingString);
});
});
ul {
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<h3>Selected:<span></span></h3>
<ul >
<li><label><input type="checkbox" value="List Item1"/>List Item1</label></li>
<li><label><input type="checkbox" value="List Item2"/>List Item2</label></li>
<li><label><input type="checkbox" value="List Item3"/>List Item3</label></li>
<li><label><input type="checkbox" value="List Item4"/>List Item4</label></li>
<li><label><input type="checkbox" value="List Item5"/>List Item5</label></li>
</ul>
</div>
CodePudding user response:
I hope this might help you a lot.
var collection = [];
$(document).ready(function() {
$('input').click(function() {
var selectedval = $(this).val();
if (!$(this).is(':checked'))
collection.splice(collection.indexOf(selectedval), 1);
else
collection.push(selectedval);
$('h3').text(collection.toString());
});
});
ul {
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<h3>Select <span></span></h3>
<ul >
<li><label><input type="checkbox" value="List Item1"/>List Item1</label></li>
<li><label><input type="checkbox" value="List Item2"/>List Item2</label></li>
<li><label><input type="checkbox" value="List Item3"/>List Item3</label></li>
<li><label><input type="checkbox" value="List Item4"/>List Item4</label></li>
<li><label><input type="checkbox" value="List Item5"/>List Item5</label></li>
</ul>
</div>