My JavaScript:
<script type="text/javascript">
function getVal(chk, adto)
{
var ad="";
if (chk.checked)
{
ad=document.getElementById(adto).value + chk.value;
document.getElementById(adto).value = ad;
}
else
{
}
}
</script>
The first block is working as I wanted but when user unchecked the check box it should remove the value from the text box.
Below is the HTML code:
<body>
<input type="checkbox" name="chk[]" value="0" id="chk0" onclick="getVal(this, 'inp0')">value 0<br>
<input type="checkbox" name="chk[]" value="1" id="chk1" onclick="getVal(this, 'inp0')">value 1<br>
<input type="checkbox" name="chk[]" value="2" id="chk2" onclick="getVal(this, 'inp0')">value 2<br>
<input type="checkbox" name="chk[]" value="3" id="chk3" onclick="getVal(this, 'inp0')">value 3<br>
<input type="checkbox" name="chk[]" value="4" id="chk4" onclick="getVal(this, 'inp0')">value 4<br>
<input type="checkbox" name="chk[]" value="5" id="chk5" onclick="getVal(this, 'inp0')">value 5<br>
<br>
<input type="text" name="inp" id="inp0" readonly><br>
Please help how to remove the unchecked options from the text box.
DEMO
Assuming all checkboxes with the same name adds to the same field.
If not we will need more code.
I also assumed the boxes are wrapped in a form tag
function getVal(chk, adto) {
var ad=[];
var checks = chk.form[chk.name];
for (i=0;i<checks.length;i++) {
if (checks[i].checked) {
ad.push(checks[i].value);
}
}
document.getElementById(adto).value = (ad.length>0)?ad.join(" "):"";
}
Related
var listvalues = []
$('.check').on('change', function() {
var val = this.checked ? this.value : '';
listvalues.push(val)
$('#show').html(listvalues);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>
I have a code which should push and pop checkbox value based on checkbox check and uncheck, for example if I check and checkbox it should show the value in a div and if I unselect the checkbox the value should disappear from div, and it should not allow anyone to append duplicate data.
But what I did appends even if it is duplicate it appends the data. Can anyone help me on this?
and i wanted to create separate div for each checkbox
Instead of push & pop value from array, you can get all checked values with listvalues = $('.check:checked').toArray().map(x => x.value); and display it.
$('.check:checked') will only return .check which are checked. Then .toArray() will convert jquery object into array & get use .map(x => x.value) to fetch only value from checked elements.
var listvalues = []
$('.check').on('change', function() {
listvalues = $('.check:checked').toArray().map(x => x.value).join(', ');
$('#show').html(listvalues);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>
To remove you can use filter to exclude the unchecked item. I'm not sure what you want to achieve with different divs, please explain.
var listvalues = []
$('.check').on('change', function() {
if(this.checked){
listvalues.push(this.value);
}
else {
listvalues = listvalues.filter(item => item != this.value);
}
$('#show').html(listvalues.sort());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>
Sorry for my english.
I have several checkboxes like these:
<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10
If I check the checkbox number two and the checkbox number seven, it is possible to automatically check with JQUERY the checkboxes from the number two and the number seven?
<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" checked />2
<input type="checkbox" name="data[]" value="3" checked />3
<input type="checkbox" name="data[]" value="4" checked />4
<input type="checkbox" name="data[]" value="5" checked />5
<input type="checkbox" name="data[]" value="6" checked />6
<input type="checkbox" name="data[]" value="7" checked />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10
Thanks!
You can use pseudo selectors first and lastand loop between then
$('[type="checkbox"]:checkbox').change(function() {
var first = $('[type="checkbox"]:checked:first').val();
var last = $('[type="checkbox"]:checked:last').val();
for(var i = first; i <= last; i++){
$('[type="checkbox"][value="'+i+'"]').prop( "checked", true );
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10
This is how I could acheive that:
var checked = [];
$(":checkbox").click(function() {
if (!$(this).is(':checked')) {
// Optional sanity
// if you wish to make user available to uncheck
return;
}
var min = $(':checkbox:checked:first').val();
var max = $(':checkbox:checked:last').val();
for (var index = Number(min)+1; index < Number(max); index++) {
$(`[type="checkbox"][value='${index}']`).prop("checked", true);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10
Perfectly possible. You could do something like this (it'll require you to add an id to your inputs. I'll use myCheck):
let first = null;
function clicked(event) {
if(first) {
let second = parseInt(event.target.value, 10);
let a = first < second ? first : second;
let b = first < second ? second : first;
for(let i = a; i <= b; i++) {
$('#myCheck[value="' + i + '"]').attr('checked', true);
}
first = null;
}
else {
first = parseInt(event.target.value, 10);
}
}
Then, just use clicked on your click event. Check it out: https://jsfiddle.net/7pf45mbz/1/
In some cases, you might have to use prop instead of attr. However, for your use case it would probably be better user experience if you used a select element with multiple instead of checkboxes.
I have an 4 input checkbox tag, and 1 div tag to display a price if one checkbox is checked
<input type="checkbox" value="None" id="check1" />
<input type="checkbox" value="None" id="check2" />
<input type="checkbox" value="None" id="check3" />
<input type="checkbox" value="None" id="check4" />
<div id="price"></div>
What i want to do if only 1 random checkbox is checked it will display number 1,800 on div#price, but if 2 checkbox is checked it will summed become 3,600 and so on until 4 checkbox. But i really confused how to do that using jQuery. Any idea?
Use :checkbox selector to assign change event on all thre type = checkbox elements, one can add [value="None"] while selecing checkbox elements to be more specific.
Use :checkbox:checked selector to select the checked checkboxes.
var val = 1800;
$(':checkbox[value="None"]').on('change', function() {
var len = $(':checkbox:checked').length;
$('#price').text(len * val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" value="None" id="check1" />
<input type="checkbox" value="None" id="check2" />
<input type="checkbox" value="None" id="check3" />
<input type="checkbox" value="None" id="check4" />
<div id="price"></div>
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" value="100" id="check1" />
<input type="checkbox" value="21" id="check2" />
<input type="checkbox" value="22" id="check3" />
<input type="checkbox" value="4" id="check4" />
<div id="price"></div>
JAVASCRIPT
var price=0;
$(':checkbox').on('change', function() {
var len = parseInt(this.value);
if($(this).is(':checked')){
price+=len;
}else{
price-=len;
}
console.log(price)
$('#price').text(price);
});
JSBIN
JSBIN-URL
I have a web form which allows users to donate money using the predefined radio buttons with a value assigned to them (all different numbers). I also have a choose your own amount textfield which they can write in a custom amount they wish to donate. I want to clear the custom textfield if a user selects a predefined choice.
So far I have created this:
HTML:
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>
JAVASCRIPT:
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('#theamount').removeProp("disabled");
}
else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val("");
}
});
But basing it on a value === true for value="" just doesn't seem right.
Is there a way to improve this?
Thanks
To disable/enable an element you need to set the value of the disabled property to true/false, removing the property doesn't work so you need
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('#theamount').prop('disabled', false);
} else {
$('#theamount').prop("disabled", true).val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment">
<label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled" />
Use removeAttr instead of removeProp and I have modified your code to accept amounts on textbox based on radio button selected
$('input[name="am_payment"]').on('click', function() {
if ($(this).val() === '') {
$('input[name="CP_otheramount"]').val('');
$('#theamount').removeAttr("disabled");
}
else {
$('#theamount').prop("disabled", "disabled");
$('input[name="CP_otheramount"]').val($(this).val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>
Update
From your comments I hope you are expecting below functionality.
$('#theamount').on('focus', function() {
$("input:radio").prop("checked",false);
$("input[value='']").prop("checked",true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="am_payment" value="3" checked="checked"> <strong>64</strong>
<input type="radio" name="am_payment" value="11" checked="checked"> <strong>100</strong>
<input type="radio" name="am_payment" value="32" checked="checked"> <strong>250</strong>
<input type="radio" value="" name="am_payment"><label>Other</label>
<input type="text" name="CP_otheramount" value="" id="theamount" disabled="disabled"/>
<input type="checkbox" name="checkbox" id="checkbox1" value="10" /> Value 1
<input type="checkbox" name="checkbox" id="checkbox2" value="20" /> value 2
<input type="checkbox" name="checkbox" id="checkbox3" value="30" /> value 3
<input type="checkbox" name="checkbox" id="checkbox4" value="40" /> value 4
<input type="checkbox" name="checkbox" id="checkbox5" value="50" /> value 5
Ect, etc. I want the add value of selected checkboxes in a text field and all selected checkbox value in a diffrent diffrent checkboxes.
Using this code for the adding of checkboxes but dont know how to get the name of the check box as well as dynamic. For example value 1 , value 2, value 3 in a textbox in front of checkbox in a hidden form.
Code of adding is given below.
$(document).ready(function () {
$("#textfield2").val( $("#textfield").val());
$('.priceAdded input[type="checkbox"]').on("change", function () {
var priceAdded = $("#textfield").val();
$('.priceAdded input[type="checkbox"]').each(function () {
if ($(this).is(":checked")) {
priceAdded = parseFloat(priceAdded) + parseFloat($(this).val());
}
$("#textfield2").val(priceAdded);
});
});
return false;
});
If you're wanting to get the id of the checkboxes and a total of the selected values
http://jsfiddle.net/hb0hhbk4/1/
HTML
<input type="checkbox" name="checkbox" id="checkbox1" value="10" class='sum' />Value 1
<input type="checkbox" name="checkbox" id="checkbox2" value="20" class='sum' />value 2
<input type="checkbox" name="checkbox" id="checkbox3" value="30" class='sum' />value 3
<input type="checkbox" name="checkbox" id="checkbox4" value="40" class='sum' />value 4
<input type="checkbox" name="checkbox" id="checkbox5" value="50" class='sum' />value 5
<input id='textfield1' type='text' />
<input id='textfield2' type='text' />
JS
$("input[type='checkbox'].sum").on('click', function () {
var total = 0;
var ids = [];
$("input[type='checkbox'].sum:checked").each(function () {
var value = parseInt($(this).val());
total += value;
ids.push($(this).attr('id'));
});
ids = ids.join(" ", ids);
$('#textfield1').val(ids);
$('#textfield2').val(total);
});
If you're looking for the LABEL near the checkbox, you need to do something like this
<span><input type="checkbox" name="checkbox" id="checkbox1" value="10" /> Value 1</span>
<span><input type="checkbox" name="checkbox" id="checkbox2" value="20" /> value 2</span>
<span><input type="checkbox" name="checkbox" id="checkbox3" value="30" /> value 3</span>
<span><input type="checkbox" name="checkbox" id="checkbox4" value="40" /> value 4</span>
<span><input type="checkbox" name="checkbox" id="checkbox5" value="50" /> value 5</span>
And inside the each function you can access the label with
$( this ).closest( "span" ).text();
Using that layout, you probably won't be able to, because there's no way of isolating "value 1", for example, from the rest of the code (it isn't the content of an element, or an attribute of anything.
You could put the "Value 1/2/3/4" text in something like a span and then you can use the adjacent selector in Jquery. for example::
<input type="checkbox" name="checkbox" id="checkbox1" value="10" /> <span>Value 1</span>
Then use
$(this).next().text();
To get the contents of the span directly after the checkbox that's just been clicked.