I'm displaying list of items with checkbox, if checkbox is checked the value of selected item is displayed in different div.
Now, if I uncheck the checkbox I should remove the items displayed in the div.
Please help me how to fix this?
$('input[name="selectedItems1"]').click(function(){
if (this.checked) {
}else{
//what should go here
}
});
This example can help you:
html
<input type="checkbox" name="selectedItems1" value="val1" />
<input type="checkbox" name="selectedItems1" value="val2" />
<input type="checkbox" name="selectedItems1" value="val3" />
<div id="result"></div>
jquery
$('input[name="selectedItems1"]').click(function(){
if (this.checked) {
var span = "<span id='" + this.value + "'>" + this.value + "</span>";
$("#result").append(span);
}else{
$("#" + this.value).remove();//what should go here
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="selectedItems1" value="val1" />
<input type="checkbox" name="selectedItems1" value="val2" />
<input type="checkbox" name="selectedItems1" value="val3" />
<div id="result"></div>
Here is a way to accomplish your task. The following way also preserves the order in which the selected data is displayed.
var selectedItemsContainer = $('#selected');
var items = $('input[name="items"]');
items.on('change', function(){
selectedItemsContainer.empty();
var appendData = '';
$.each(items, function(i, item)
{
if ($(item).prop('checked'))
{
appendData +=$(item).val() + ' ';
}
});
selectedItemsContainer.append(appendData);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="checkbox" name="items" value="Data 1">Data 1
<input type="checkbox" name="items" value="Data 2">Data 2
<input type="checkbox" name="items" value="Data 3">Data 3
<br>
<div id="selected"></div>
Related
This is my html:
<input class="eret" type="checkbox" value="Red">Red</input>
<input class="eret" type="checkbox" value="Green">Green</input>
<input class="eret" type="checkbox" value="Blue">Blue</input>
<input class="eret" type="button" value="Get checkboxes" id="getCheckboxesButton"></input>
<div id="debugOutput">
</div>
This is my javascript:
$(document).ready(function() {
$('#getCheckboxesButton').live('click', function(event) {
var checkboxValues = [];
$('input.eret[type="checkbox"]:checked').each(function(index, elem) {
checkboxValues.push($(elem).val());
});
$('#debugOutput').html(checkboxValues.join(','));
});
});
How can I define Javascript code with this output?
Output (Example):
Color:"Green" --> One : Without Comma
Color:"Green",Color:"Blue" / Color:"Red",Color:"Green",Color:"Blue" --> Multi : With Comma
jsfiddle
Something like this?
$(document).ready(function() {
$('#getCheckboxesButton').on('click', function(event) {
var checkboxValues = [];
$('input.eret[type="checkbox"]:checked').each(function(index, elem) {
checkboxValues.push('Color:"' + $(elem).val() + '"');
});
$('#debugOutput').html(checkboxValues.join(','));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="eret" type="checkbox" value="Red">Red
<input class="eret" type="checkbox" value="Green">Green
<input class="eret" type="checkbox" value="Blue">Blue
<input class="eret" type="button" value="Get checkboxes" id="getCheckboxesButton">
<div id="debugOutput">
</div>
you can use this keyword to access the selected value:
what you were doing is instead of using on click event you used live() and Live() has been removed and should be replaced with on(...).
Live() API has been removed in jQuery 1.9; please use on() instead.
$(document).ready(function() {
$('#getCheckboxesButton').on('click', function(event) {
var checkboxValues = [];
$('input.eret[type="checkbox"]:checked').each(function(index, elem) {
checkboxValues.push('Color:"' + $(this).val() + '"');
});
$('#debugOutput').html(checkboxValues.join(','));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="eret" type="checkbox" value="Red">Red</input>
<input class="eret" type="checkbox" value="Green">Green</input>
<input class="eret" type="checkbox" value="Blue">Blue</input>
<input class="eret" type="button" value="Get checkboxes" id="getCheckboxesButton"></input>
<div id="debugOutput">
</div>
I have list input checkbox
<input type="checkbox" name="id_image" value="homies_01" class="id_image" />
<input type="checkbox" name="id_image" value="homies_02" class="id_image" />
<input type="checkbox" name="id_image" value="homies_03" class="id_image" />
<input type="text" name="id_image" value="" class="id_image_check" />
How to check multiple input checkbox i have show value to input type="text"as
<form>
<input type="text" name="id_image" value="homies_01, homies_02, homies_03" class="id_image_check" />
</form>
There is a perfecly solution with Vanilla Javascript
function attachListeners() {
var checkboxes = document.getElementsByClassName('id_image')
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('click', getAndPutValues, false);
}
}
function getAndPutValues() {
var result = [];
document.querySelectorAll(".id_image:checked").forEach(function(item) { result.push(item.value);});
document.querySelector('.id_image_check').value = result.join(', ');
}
attachListeners();
With jquery
$(".id_image").on("click",function(){
$(".id_image_check").val(
$(".id_image :checked").map((i,el) => el.value).join(", ")
)
});
First of all you should use array notation for checkbox names
<input type="checkbox" name="id_image[]" value="homies_01" class="id_image" />
<input type="checkbox" name="id_image[]" value="homies_02" class="id_image" />
<input type="checkbox" name="id_image[]" value="homies_03" class="id_image" />
It will help you to post multiple values simultaneously
After that for checking values in jQuery you can use
<script type="text/javascript">
$('[name="id_image[]"]').click(function(){
var value = '';
$('[name="id_image[]"]:checked').each(function(){
value += $(this).val();
});
$('#id_image_check').val(value);
});
</script>
Try this :
<input type="checkbox" name="id_image" value="homies_01" class="id_image" onchange="toggleCheckbox(this)" />
<input type="checkbox" name="id_image" value="homies_02" class="id_image" onchange="toggleCheckbox(this)" />
<input type="checkbox" name="id_image" value="homies_03" class="id_image" onchange="toggleCheckbox(this)" />
<input type="text" name="id_image" id="id_image" value="" class="id_image_check" />
<script type="text/javascript">
var arrImages = [];
function toggleCheckbox(element) {
console.log('element', element.value);
arrImages.push(element.value);
document.getElementById("id_image").value = arrImages;
}
</script>
Just use square brackets [] at end of name if you want to submit it using form or use the following method in jQuery to get values of multiple selected checkboxes.
$('#show').click(function(){
values = "";
$('input.id_image:checked').each(function(){
values += $(this).val() + " ";
});
if(values){
$('#values').html(values);
}else{
$('#values').html("None");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="id_image[]" value="homies_01" class="id_image" /> Homies 1
<input type="checkbox" name="id_image[]" value="homies_02" class="id_image" /> Homies 2
<input type="checkbox" name="id_image[]" value="homies_03" class="id_image" /> Homies 3
<br>
<button id="show">Show</button>
<br>
<div id="values"></div>
I prefer to get checked checkboxes from a specific checkbox group, depending on which button I have clicked, I used $('input[name="' + groupName + '"]:checked'). This will ensure that the checked checkboxes from only the coffee or animals checkbox group are selected. But it's not working as I expected.
<body>
<div>
<input type="checkbox" value="Lion" name="animals" checked />Lion<br>
<input type="checkbox" value="Tiger" name="animals" />Tiger<br>
<input type="checkbox" value="Elephant" name="animals" />Elephant<br>
<input type="checkbox" value="Girafee" name="animals" />Girafee<br>
<input type="submit" id="__mainAnimals" />
<br><br><br><br><br><br>
<input type="checkbox" value="Coffe" name="drinks" checked />Coffe<br>
<input type="checkbox" value="Tea" name="drinks" />Tea<br>
<input type="checkbox" value="Milk" name="drinks" />Milk<br>
<input type="checkbox" value="Mocha" name="drinks" />Mocha<br>
<input type="submit" id="__mainDrinks" />
</div>
<div id="__DIVresult"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#__mainAnimals').click(function () {
getSelectedCheckBoxes('animals');
});
$('#__mainDrinks').click(function () {
getSelectedCheckBoxes('drinks');
});
var getSelectedCheckBoxes = function (groupName) {
var result = $('input[name="' + groupName + '"]:checked');
if (result.length > 0) {
var resultString = result.length + " checkboxe(s) checked<br/>";
result.each(function () {
resultString += $(this).val() + "<br/>";
});
$('__DIVresult').html(resultString);
}
else {
$('__DIVresult').html("No checkbox checked");
}
};
});
</script>
</body>
1st id selector is # so $('__DIVresult') should be $('#__DIVresult')
2nd An ID should start with a letter for compatibility
Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.
REF: https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/id
3rd some small update, added two result div, one for animal one for drink:
<hr>
animals Result:
<div id="DIVresultanimals"></div>
<hr>
drinks Result:
<div id="DIVresultdrinks"></div>
Then target them dynamically with $('#DIVresult'+groupName).html(resultString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" value="Lion" name="animals" checked />Lion
<br>
<input type="checkbox" value="Tiger" name="animals" />Tiger
<br>
<input type="checkbox" value="Elephant" name="animals" />Elephant
<br>
<input type="checkbox" value="Girafee" name="animals" />Girafee
<br>
<input type="submit" id="mainAnimals" />
<br>
<br>
<br>
<br>
<br>
<br>
<input type="checkbox" value="Coffe" name="drinks" checked />Coffe
<br>
<input type="checkbox" value="Tea" name="drinks" />Tea
<br>
<input type="checkbox" value="Milk" name="drinks" />Milk
<br>
<input type="checkbox" value="Mocha" name="drinks" />Mocha
<br>
<input type="submit" id="mainDrinks" />
</div>
<hr>
animals Result:
<div id="DIVresultanimals"></div>
<hr>
drinks Result:
<div id="DIVresultdrinks"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#mainAnimals').click(function() {
getSelectedCheckBoxes('animals');
});
$('#mainDrinks').click(function() {
getSelectedCheckBoxes('drinks');
});
var getSelectedCheckBoxes = function(groupName) {
var result = $('input[name="' + groupName + '"]:checked');
if (result.length > 0) {
var resultString = result.length + " checkboxe(s) checked<br/>";
result.each(function() {
resultString += $(this).val() + "<br/>";
});
$('#DIVresult'+groupName).html(resultString);
} else {
$('#DIVresult'+groupName).html("No checkbox checked");
}
};
});
</script>
In your drink and animal section you are not separating the two so when you use your click function it doesn't discriminate between the tow sections. Once you add each one to a class then the button will only call the checked items that are actually checked.
<html>
<form>
<input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Lion" />Lion</br>
<input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Tiger" />Tiger</br>
<input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Elephant" />Elephant</br>
<input name="selector[]" id="ani" class="ads_Checkbox" type="checkbox" value="Girafee" />Girafee</br>
<input type="button" id="save_value" name="save_value" value="Save" /></br>
<textarea id="t"></textarea>
</form>
<script>
function updateTextArea() {
var allVals = [];
$('.ads_Checkbox:checked').each(function() {
allVals.push($(this).val());
});
$('#t').val(allVals);
}
$('#save_value').click(function(){
$('.ads_Checkbox:checked').each(function(){
updateTextArea();
});
});
Inside this code I have named each animal and placed them in a class so I could recall them from an array. I hoped this helped.
I have few checkboxes and I want to convert them into dropdown list. I tried something but don't know at the end what to do?
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
<p class="wysija-checkbox-label">Select list(s):</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]">
General Antiques
</label>
</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]">
Antique & Collectible Tools
</label>
</p>
</form>
and i tried following jQuery to convert these checkboxes into dropdown list. but don't getting to how to done this successfully.
jQuery(document).ready(function($){
var extra, checkBoxesName,
checkBoxlabel,
checkBoxes = $('.wysija-checkbox-paragraph');
var checkBoxesLabel = $('.wysija-checkbox-label');
checkBoxesName = checkBoxes.find('input').prop('name');
checkBoxlabel = checkBoxes.find('label').text();
checkBoxesLabel.append('<select name="'+checkBoxesName+'">'+extra+'</select>');
$('.wysija-checkbox-paragraph').each(function(n){
var dataText = $(this).find('label').text();
$('select[name='+checkBoxesName+']').append('<option value="'+n+'">'+dataText+'</option>');
});
//checkBoxes.remove();
});
Try this:
var checkBoxes = $('.wysija-checkbox-paragraph'),
checkBoxesLabel = $('.wysija-checkbox-label'),
checkBoxesName = checkBoxes.find('input').prop('name')
$select = $('<select name="' + checkBoxesName + '"></select>').appendTo(checkBoxesLabel);
checkBoxes.each(function (n) {
var dataText = $(this).find('label').text();
var dataValue = $(this).find('input').val();
$select.append('<option value="' + dataValue + '">' + dataText + '</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
<p class="wysija-checkbox-label">Select list(s):</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]" /> General Antiques
</label>
</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]" /> Antique & Collectible Tools
</label>
</p>
</form>
Note, that since checkboxes allow to select multiple values, you might want to add multiple attribute to selectbox, in order to allow the same behavior.
jQuery(document).ready(function($){
var extra, checkBoxesName,
checkBoxlabel,
checkBoxes = $('.wysija-checkbox-paragraph');
var checkBoxesLabel = $('.wysija-checkbox-label');
checkBoxesName = checkBoxes.find('input').prop('name');
checkBoxlabel = checkBoxes.find('label').text();
checkBoxesLabel.append('<select name="'+checkBoxesName+'">'+extra+'</select>');
$('.wysija-checkbox-paragraph').each(function(n){
var dataText = $(this).find('label').text();
$('.wysija-checkbox-paragraph').append('<select name="'+checkBoxesName+']" > <option value="'+n+'">'+dataText+'</option></select>');
});
//checkBoxes.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form-wysija-2" class="widget_wysija" action="#wysija" method="post">
<p class="wysija-checkbox-label">Select list(s):</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="1" name="wysija[user_list][list_id][]">
General Antiques
</label>
</p>
<p class="wysija-checkbox-paragraph">
<label>
<input class="wysija-checkbox validate[required]" type="checkbox" value="3" name="wysija[user_list][list_id][]">
Antique & Collectible Tools
</label>
</p>
</form>
The radio buttons and select list contain the same values. I need to select the corresponding radio button if the select list changes and vice versa.
I have come this far, but I am having a hard time combining these functions... any help greatly appreciated.
Check fiddle
$('.select-color').change(updateRadio);
function updateRadio() {
var sval = $(this).val();
$('input[name="color"][value="' + sval + '"]').prop('checked', true);
};
$('input[name="color"]').change(updateSelect);
function updateSelect() {
var rval = $('input[name="color"]:checked').val();
$('.select-color' + ' option[value="' + rval + '"]').prop('selected', true);
$('.select-color').selectmenu('refresh');
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<select name="color" class="select-color">
<option value="1" selected>Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
</select>
<br><br>
<input type="radio" name="color" value="1" checked="checked" /> Red<br />
<input type="radio" name="color" value="2" /> Green<br />
<input type="radio" name="color" value="3" /> Blue<br />
</form>
* Update *
After I switched to using the Bootstrap Select plugin, I needed to update the code provided by #JoshCrozier. For those interested, here it is:
function updateElements(e) {
var valueAttribute = e.target.value;
$('select[name="color"]').val(valueAttribute);
$('.select-color').selectpicker('refresh');
$('input[name="color"]' + valueAttribute).prop('checked', true);
}
$('select[name="color"], input[name="color"]').change(updateElements);
Listen to the change event of both elements using:
$('.select-color, input[name="color"]').change(updateElements);.
Then just get the triggered element's value using e.target.value.
function updateElements(e) {
var valueAttribute = '[value="' + e.target.value + '"]';
$('.select-color option' + valueAttribute).prop('selected', true);
$('input[name="color"]' + valueAttribute).prop('checked', true);
}
Updated Example
$('.select-color, input[name="color"]').change(updateElements);
function updateElements(e) {
var valueAttribute = '[value="' + e.target.value + '"]';
$('.select-color option' + valueAttribute).prop('selected', true);
$('input[name="color"]' + valueAttribute).prop('checked', true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name="color" class="select-color">
<option value="1" selected>Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
</select>
<br>
<br>
<input type="radio" name="color" value="1" checked="checked" />Red
<br />
<input type="radio" name="color" value="2" />Green
<br />
<input type="radio" name="color" value="3" />Blue
<br />
</form>
Alternatively..
Though this would make the function a little longer, you could also add a little conditional logic to determine whether the triggered element is a select/radio like this:
function updateElements(e) {
var $element = $(e.target),
valueAttribute = '[value="' + $element[0].value + '"]';
if ($element.is(':radio')) {
$('.select-color option' + valueAttribute).prop('selected', true);
} else {
$('input[name="color"]' + valueAttribute).prop('checked', true);
$('.select-color').selectmenu('refresh');
}
}
Alternative Example