Checkbox value showing using JavaScript - javascript

I want to show my checkbox value when I check it, but my code show only one value.
For example if I check 1st checkbox it show it's value at that time. If I check 2nd checkbox then it's value will display beside previous value.
What should I do?
<script>
function test(item) {
var result = $('#val').val();
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test()" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test()" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test()" />40
<br />
</html>

Please note -
You should have to use unique id
my suggestion is use class instead
Please refer this, i hope will be useful to you
$(document).ready(function(){
$('.chk_val').on('click',function(){
var result = $(this).val();
$('#course').append(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />

$('input[data-action="data-click"]').on("click", function() {
if($(this). prop("checked")==true){
var dataDisplay = "<span id='" + this.value + "'>" + this.value + "</span>";
$('div#show').append(dataDisplay + " ")
}
else {
$("#" + this.value).remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
</div>
<input type="checkbox" value="20" data-action="data-click" />20
<br />
<input type="checkbox" value="30" data-action="data-click" />30
<br />
<input type="checkbox" value="40" data-action="data-click" />40
<br />

You have given same id to every checkbox so javascript finds only the first checkbox and shows its value.
You can send the clicked checkbox to the function and get its value
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val2" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val3" value="40" onclick="test(this)" />40
<script>
function test(item) {
var result = $(item).val();
$('#course').html(result);
}
</script>

function test(element) {
var result = $(element).val();
$('#course').append(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
Change $('#course').html(result); to $('#course').append(result);
Use this context and to get current checkbox

First of all, id attribute should be unique you need to always use class attribute for a group of elements.
For referring the clicked element pass this as click handler argument.
<script>
function test(item) {
document.getElementById('course').innerHTML = item.value;
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" value="40" onclick="test(this)" />40
<br />
</html>

Use class instead of id and bind the click event for class
$('.val').click(function() {
$("#course").html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="val" value="20" />20
<br />
<input type="checkbox" class="val" value="30" />30
<br />
<input type="checkbox" class="val" value="40" />40
<br />
</html>

Try this one. Pass the item to the function and display the value of item. I have attached the sample code snippet.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item.value;
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
</html>

In the first Place you should never use same ID "val" to all the Check boxes you have Classes for that.
This is just a modification to previously entered code, to let you know that you don't have to pass the whole this Object to your function rather you can directly pass the value like this.value
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item;
$('#course').html($('#course').html());
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this.value)" />20
<br />
<input type="checkbox" value="30" onclick="test(this.value)" />30
<br />
<input type="checkbox" value="40" onclick="test(this.value)" />40
<br />
</html>
Hope that this helped you.

Related

Show only Checked Options using Jquery

How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.
$("#checked_show").click(function() {
$("input").hide();
$("label").hide();
$("input:checked").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.
You can use input:checked combined with :not() to select the inputs that aren't checked.
$("#checked_show").click(function() {
$("input:not(:checked)").each((i, el) => {
$(el).next().hide();
$(el).hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
You should use :checked to select the checked input and negate that with :not(), also to hide the labels you have to loop through all elements and select the next element using .next(), here is a working snippet:
$("#checked_show").click(function () {
if ($("input[type='checkbox']:checked").length) {
$("input[type='checkbox']:not(:checked)").each(function (idx, el) {
$(el).next().hide();
$(el).hide();
});
} else {
console.log('Please select an input!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>

Use multiple checkbox values calculations on the same page

<script type="text/javascript">
var total = 0;
function test(item){
if(item.checked){
total+= parseInt(item.value);
}else{
total-= parseInt(item.value);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total + " ";
document.getElementById('Totalcost2').innerHTML = total + " ";
document.getElementById('Totalcost3').innerHTML = total + " ";
}
</script>
</head>
<body>
<input type="checkbox" name="channelcost" value="10" onClick="test(this,);" />10<br />
<input type="checkbox" name="channelcost" value="20" onClick="test(this,);" />20 <br />
<input type="checkbox" name="channelcost" value="40" onClick="test(this,);" />40 <br />
<input type="checkbox" name="channelcost" value="60" onClick="test(this,);" />60 <br />
Total Amount : <span id="Totalcost"> </span><br />
<input type="checkbox" name="channelcost" value="10" onClick="test(this,);" />10<br />
<input type="checkbox" name="channelcost" value="20" onClick="test(this,);" />20 <br />
<input type="checkbox" name="channelcost" value="40" onClick="test(this,);" />40 <br />
<input type="checkbox" name="channelcost" value="60" onClick="test(this,);" />60 <br />
Total Amount : <span id="Totalcost2"> </span><br />
<input type="checkbox" name="channelcost" value="10" onClick="test(this,);" />10<br />
<input type="checkbox" name="channelcost" value="20" onClick="test(this,);" />20 <br />
<input type="checkbox" name="channelcost" value="40" onClick="test(this,);" />40 <br />
<input type="checkbox" name="channelcost" value="60" onClick="test(this,);" />60 <br />
Total Amount : <span id="Totalcost3"> </span><br />
</html>
My question is how to set it to show 3 different sums on the same page without conflicts, about conflicts I mean if I set 3 times the id="Totalcost" on the same page it should show them differently but they show the same, i tried to set 3 different id's id=Totalcost, Totalcost2 and Totalcost3 for example but it doesn't work it goes in conflict.
If I understand you well, because I'm not sure :
You can't attribute same ID to multiple elements.
You have to do something like this :
function test(){
var checklist = document.getElementById('modulo')
.getElementsByClassName('checklist');
for (var i = 0 ; i < checklist.length ; i++) {
var checkboxes = checklist[i].querySelectorAll('input[type=checkbox]'),
sum = 0;
for (var j = 0 ; j < checkboxes.length ; j++) {
if (checkboxes[j].checked) {
sum += Number(checkboxes[j].value)
}
}
checklist[i].getElementsByClassName('totalcost')[0].innerHTML = sum + " ";
}
}
document.getElementById('modulo').addEventListener('change',test,false)
And in BODY :
<form id="modulo">
<div class="checklist">
<input type="checkbox" name="channelcost" value="10" />10<br />
<input type="checkbox" name="channelcost" value="20" />20 <br />
<input type="checkbox" name="channelcost" value="40" />40 <br />
<input type="checkbox" name="channelcost" value="60" />60 <br /><br />
Total Amount : <span class="totalcost"> </span><br /><br />
</div>
<div class="checklist">
<input type="checkbox" name="channelcost" value="10" />10<br />
<input type="checkbox" name="channelcost" value="20" />20 <br />
<input type="checkbox" name="channelcost" value="40" />40 <br />
<input type="checkbox" name="channelcost" value="60" />60 <br /><br />
Total Amount : <span class="totalcost"> </span>
</div>
</form>

Cloning a section with JQuery not working

I try to clone a section after another section on user input (clicking a radio button), but it doesn’t works...
your help is appreciated.
<section class="clonetester">
<input id="1a" type="radio" value="1" name="q1">yes
<input id="1b" type="radio" value="0" name="q1" >no
<br />
<input id="date1" type="datetime-local" name="date" />date<br />
</section>
<section class="here">clone follows</section>
<script>
$('input').click(function(e){
$('#1a').(':checked'){
$('.clonetester').clone().appendTo(".here");
}
})
</script>
You have multiple changes that you will have to make for it to work.
Use change instead of click for input elements.
$('#1a').(':checked') has to be replaced with $('#1a').is(':checked') and should be enclosed in a if block.
$('body').on('change', 'input[type="radio"]', function() {
var $this = $(this);
if ($this.hasClass('1a') && $this.is(':checked')) {
// closeset clonetester
var $clonetester = $this.closest('.clonetester').first();
if ($clonetester) {
$clonetester.clone().appendTo(".here");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="clonetester">
<input class="1a" type="radio" value="1" name="q1">yes
<input class="1b" type="radio" value="0" name="q1">no
<br />
<input class="date1" type="datetime-local" name="date" />date
<br />
</section>
<section class="here">clone follows</section>

How to create button to check uncheckable checkbox

I have 10 checkboxes and as an example i checked only two of them and i need to create a button to check the another 8 box and uncheck the other two (that already checked before) How i can do this?
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
here simple example for your code
$('input.check11').click(function(){
$('input.check21').prop('checked',this.checked)
$('input.check22').prop('checked', false)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<label>
<span><input type="checkbox" name="discounting" class="check11" value="">all</span><br>
</label>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<label>
<span><input type="checkbox" checked name="discounting" class="check22" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" checked name="discounting" class="check22" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
</div>
</div>
</form>
I thing the best approach is to add class to every checkbox that you want to invert, and for each checkbox with that class invert 'checked' property
$('button').on('click', function(){
$('.invert').each(function(){
var $this = $(this);
$this.prop('checked', !$this.prop('checked'));
});
});
$(document).ready(function(){
$('#button').click(function(){
$('input[type="checkbox"]').each(function(){
if($(this).prop("checked") == true){
$(this).prop('checked', false);
}
else if($(this).prop("checked") == false){
$(this).prop('checked', true);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
<input type="button" id="button" value="click">
Please check the Code will help you out
thanks
$(document).ready(function () {
$('#btnClick').click(function () {
$('input[type="checkbox"]').each(function () {
var $this = $(this);
$this.prop('checked', !$this.prop('checked'));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
<br />
<input type="button" id="btnClick" value="Click" >
Check This answer , you need to loop in all check box and vice versa check
$('#copyButton2').on('click',function(){
$('#AllCheckbox input').each(function(){
$(this).prop('checked', !$(this).prop("checked"));
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='AllCheckbox'>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
</div>
<button id="copyButton2">CheckOther</button>

Want to give different ID to each element

I want to add HTML tag into the values.
http://jsfiddle.net/iamakshay04/seyzta8c/1/
Above is the fiddle. When checkbox is clicked, the values are printed, I want to print each value as a different html element. <p>1</p> <p>2</p> <p>3</p>
$('.ads_Checkbox').click(function() {
var sel = $('input[type=checkbox]:checked').map(function(_, el) {
return $(el).val();
}).get();
document.getElementById("demo").innerHTML = sel;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ad_Checkbox1" class="ads_Checkbox" type="checkbox" value="1" />
<input id="ad_Checkbox2" class="ads_Checkbox" type="checkbox" value="2" />
<input id="ad_Checkbox3" class="ads_Checkbox" type="checkbox" value="3" />
<input id="ad_Checkbox4" class="ads_Checkbox" type="checkbox" value="4" />
<input type="button" id="save_value" name="save_value" value="Save" />
<p id="demo">
</p>
If you want to show values as different elements then try below where you can add paragraphs at the time of reading the values.
$('.ads_Checkbox').click(function() {
var sel = $('input[type=checkbox]:checked').map(function(_, el) {
return "<p>"+ $(el).val() + "</p>";
}).get();
document.getElementById("demo").innerHTML = sel;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ad_Checkbox1" class="ads_Checkbox" type="checkbox" value="1" />
<input id="ad_Checkbox2" class="ads_Checkbox" type="checkbox" value="2" />
<input id="ad_Checkbox3" class="ads_Checkbox" type="checkbox" value="3" />
<input id="ad_Checkbox4" class="ads_Checkbox" type="checkbox" value="4" />
<input type="button" id="save_value" name="save_value" value="Save" />
<p id="demo">
</p>
This will give you the different elements:-
$('.ads_Checkbox').change(function() {
var sel = $('input[type=checkbox]:checked').map(function(_, el) {
return $('<p></p>').html($(el).val());
}).get();
$("#demo").html(sel);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ad_Checkbox1" class="ads_Checkbox" type="checkbox" value="1" />
<input id="ad_Checkbox2" class="ads_Checkbox" type="checkbox" value="2" />
<input id="ad_Checkbox3" class="ads_Checkbox" type="checkbox" value="3" />
<input id="ad_Checkbox4" class="ads_Checkbox" type="checkbox" value="4" />
<input type="button" id="save_value" name="save_value" value="Save" />
<p id="demo">
</p>

Categories

Resources