I have a form in that there is a input field and checkbox
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="0_23" onchange="handleChange(this);">
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="1_78" onchange="handleChange(this);">
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="2_89" onchange="handleChange(this);">
Now i have a function
function handleChange(chk){
var arr=chk.value.split('_');
if(chk.checked == true){
document.getElementsByName("t_c[arr[0]]").disabled = false;
}else{
document.getElementsByName("t_c[arr[0]]").disabled = true;
}
}
I want to disable corresponding input field on uncheck and enable when checked. but i am confuse how to use proper javascript syntax for getElementsByName("t_c[arr[0]]")
You can get the value of arr[0] after split to determine which input box needs to be enable or disable based on the value of the checkbox:
function handleChange(chk){
var arr = chk.value.split('_');
if(chk.checked){
document.getElementsByName("t_c[]")[arr[0]].disabled = false;
}else{
document.getElementsByName("t_c[]")[arr[0]].disabled = true;
}
}
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="0_23" onchange="handleChange(this);">
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="1_78" onchange="handleChange(this);">
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="2_89" onchange="handleChange(this);">
The only problem with your code was that you need to get the element which is at the arr[0]th index of the result, which was given by getElementsByName.
Correcting that, your code works fine:
function handleChange(chk) {
var arr = chk.value.split('_');
if (chk.checked == true) {
document.getElementsByName("t_c[]")[arr[0]].disabled = false;
} else {
document.getElementsByName("t_c[]")[arr[0]].disabled = true;
}
}
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="0_23" onchange="handleChange(this);">
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="1_78" onchange="handleChange(this);">
<input type="text" name="t_c[]" />
<input type="checkbox" name="rele_cent[]" checked="checked" value="2_89" onchange="handleChange(this);">
Try this as it works fine and solves your problem, and if not yet then let me know.
function handleChange(chk) {
var inputbox = document.getElementsByClassName("inputbox");
var check = document.getElementsByClassName("check");
for(i = 0; i < inputbox.length; i++) {
if(check[i].checked == false) {
inputbox[i].disabled = true;
}
else {
inputbox[i].disabled = false;
}
}
}
<input type="text" name="t_c[]" class="inputbox"/>
<input class="check" type="checkbox" name="rele_cent[]" checked="checked" value="0_23" onchange="handleChange(this);">
<input type="text" name="t_c[]" class="inputbox" />
<input class="check" type="checkbox" name="rele_cent[]" checked="checked" value="1_78" onchange="handleChange(this);">
<input type="text" name="t_c[]" class="inputbox" />
<input class="check" type="checkbox" name="rele_cent[]" checked="checked" value="2_89" onchange="handleChange(this);">
Related
I am trying to create a pricing calculator that takes all of the checked radio buttons and pushes them into an array where it is added in the end. However, I would like to have one of the radio buttons take the attribute of the first radio button and multiply it by its own value.
I tried nesting an if statement inside of another if statement but it will only seem to add the values of the first if statement and ignore the second.
$(".w-radio").change(function() {
var totalPrice = 0,
values = [];
$("input[type=radio]").each(function() {
if ($(this).is(":checked")) {
if ($(this).is('[name="catering"]')) {
var cateringFunc = (
$(this).val() * $('[name="gastronomy"]').attr("add-value")
).toString();
values.push($(this).val());
}
values.push($(this).val());
totalPrice += parseInt($(this).val());
}
});
$("#priceTotal span").text(totalPrice);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hack43-radio-group w-radio">
<input type="radio" name="gastronomy" value="0" add-value="10">0<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="venue" value="0">0<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="catering" value="0">0<BR>
<input type="radio" name="catering" value="40">40<BR>
<input type="radio" name="catering" value="45">45<BR>
<input type="radio" name="catering" value="60">60<BR>
</label>
<div class="hack42-45-added-value-row">
<div id="priceTotal">
<span>0</span>
</div>
</div>
When the condition is true you should use cateringFunc instead of $(this).val() when pushing into the values array and adding to totalPrice.
I assume you only want to get the added value from the selected radio button, so I added :checked to the selector. Then you also need to provide a default value if none of the gastronomy buttons are checked.
You shouldn't make up new attributes like add-value. If you need custom attributes, use data-XXX. These can be accessed using the jQuery .data() method.
$(".w-radio").change(function() {
var totalPrice = 0,
values = [];
$("input[type=radio]:checked").each(function() {
if ($(this).is('[name="catering"]')) {
var cateringFunc = (
$(this).val() * ($('[name="gastronomy"]:checked').data("add-value") || 0)
);
values.push(cateringFunc.toString());
totalPrice += cateringFunc;
}
values.push($(this).val());
totalPrice += parseInt($(this).val());
});
$("#priceTotal span").text(totalPrice);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hack43-radio-group w-radio">
<input type="radio" name="gastronomy" value="0" data-add-value="10">0<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="venue" value="0">0<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="catering" value="0">0<BR>
<input type="radio" name="catering" value="40">40<BR>
<input type="radio" name="catering" value="45">45<BR>
<input type="radio" name="catering" value="60">60<BR>
</label>
<div class="hack42-45-added-value-row">
<div id="priceTotal">
<span>0</span>
</div>
</div>
I have three radio buttons with another input. What I want is when I click on any radio button those another input value should be display in the label tag. I try some code but It's not correct.
function displayRadioValue() {
var ele = document.getElementsByName('plan');
for(i = 0; i < ele.length; i++) {
if(ele[i].checked)
document.getElementById("investplan").innerHTML = document.getElementById("planinvest").value;
}
}
<input type="radio" name="plan" checked onclick="displayRadioValue()" />
<input type="text"value="10" id="planinvest1" class="hidden-plan-type">
<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text"value="20" id="planinvest2" class="hidden-plan-type">
<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text"value="30" id="planinvest3" class="hidden-plan-type">
<label id="investplan"></label>
You can use nextElementSibling like in document.getElementById("investplan").innerHTML = ele[i].nextElementSibling.value;
Demo
function displayRadioValue() {
var ele = document.getElementsByName('plan');
for (i = 0; i < ele.length; i++) {
if (ele[i].checked)
document.getElementById("investplan").innerHTML = ele[i].nextElementSibling.value;
}
}
<input type="radio" name="plan" checked onclick="displayRadioValue()" />
<input type="text" value="10" id="planinvest1" class="hidden-plan-type">
<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text" value="20" id="planinvest2" class="hidden-plan-type">
<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text" value="30" id="planinvest3" class="hidden-plan-type">
<label id="investplan"></label>
you can try this
only if That radio buttons are fixed id's and name
document.getElementById("investplan").innerHTML = "Invest plan is"+document.getElementById("planinvest"+(i+1)).value;
here i am concatenating checkbox index +1 and getting values of planinvestX value.
Full code:
function displayRadioValue() {
var ele = document.getElementsByName('plan');
for(i = 0; i < ele.length; i++) {
if(ele[i].checked)
document.getElementById("investplan").innerHTML = "Invest plan is "+document.getElementById("planinvest"+(i+1)).value;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="radio" name="plan" checked onclick="displayRadioValue()" />
<input type="text" value="10" id="planinvest1" class="hidden-plan-type">
<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text" value="20" id="planinvest2" class="hidden-plan-type">
<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text" value="30" id="planinvest3" class="hidden-plan-type">
<label id="investplan"></label>
</body>
</html>
Here is a solid way to do it. I've added labels to these element groups because it makes it easier to access the associated text element value, and also because it's good practice in forms.
I set up the event listeners in a script rather than repeat them inline for each element. Again, just good practice and keeps logic separated from content.
I've also added a way to kick it off on page load and populate that element immediately based on whatever default checked value exists.
window.onload = function() {
[...document.querySelectorAll('input[name="plan"]')].forEach(el => el.addEventListener('change', displayRadioValue));
function displayRadioValue(e) {
if (e.target.checked) {
let val = e.target.closest('label').querySelector('input[type="text"]').value;
document.getElementById("investplan").innerHTML = val;
}
}
//initialize
displayRadioValue({
target: document.querySelector('input[name="plan"]:checked')
})
}
label {
display: block;
margin-bottom: 5pc'
}
<label>
<input type="radio" name="plan" checked />
<input type="text" value="10" id="planinvest1" class="hidden-plan-type">
</label>
<label>
<input type="radio" name="plan" />
<input type="text" value="20" id="planinvest2" class="hidden-plan-type">
</label>
<label>
<input type="radio" name="plan" />
<input type="text" value="30" id="planinvest3" class="hidden-plan-type">
</label>
<label id="investplan"></label>
You can get value of input by it's id dynamically
Demo
function displayRadioValue() {
var ele = document.getElementsByName('plan');
for(i = 0; i < ele.length; i++) {
let inputIndex = i+1
if(ele[i].checked)
document.getElementById("investplan").innerHTML = document.getElementById(`planinvest${inputIndex}`).value;
}
}
<input type="radio" name="plan" checked onclick="displayRadioValue()" />
<input type="text"value="10" id="planinvest1" class="hidden-plan-type">
<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text"value="20" id="planinvest2" class="hidden-plan-type">
<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text"value="30" id="planinvest3" class="hidden-plan-type">
<label id="investplan"></label>
I have a textfield which contains certain value:
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
this is the input checkbox
<input type="checkbox" name="user_id[] value="61" />
<input type="checkbox" name="user_id[] value="62" />
<input type="checkbox" name="user_id[] value="63" />
*note i run this checkbox in php thats why it contains the [] for array.
I want the checkbox to checked if there is a value of 61 inside the textfield. I want it to be dynamic because it is from database, because value can be change and it is not fixed. How do i do this?
thanks in advance
You can try something like this
let ids = $('#studID').val().split(',');
ids.forEach(function(id) {
$('input[type="checkbox"][value="'+id+'"]').prop('checked',true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
<input type="checkbox" name="user_id[]" value="66" />
<input type="checkbox" name="user_id[]" value="67" />
<input type="checkbox" name="user_id[]" value="68" />
let ids = $('#studID').val().split(',');
ids.forEach(function(id) {
$('input[type="checkbox"][value="'+id+'"]').prop('checked',true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
<input type="checkbox" name="user_id[]" value="66" />
<input type="checkbox" name="user_id[]" value="67" />
<input type="checkbox" name="user_id[]" value="68" />
plain javascript
let ids = document.querySelector("#studID").value.split(',');
ids.forEach(function(id) {
var checkbox = document.querySelector("input[name='user_id[]'][value='"+id+"']");
if(checkbox) {
checkbox.checked = true;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
<input type="checkbox" name="user_id[]" value="66" />
<input type="checkbox" name="user_id[]" value="67" />
<input type="checkbox" name="user_id[]" value="68" />
You have to iterate over the inputs and then check the condition:
document.querySelectorAll("input").forEach(function(i) {
if (i.value.indexOf("61") > -1) {
i.checked = true;
}
});
<input type="checkbox" name="user_id[]" value=" 61 " />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value=" 63" />
Add a change listener to the text field. It should loop through the checkboxes, either checking or unchecking them depending on whether their values match the input.
document.querySelector("#studID").addEventListener("change", function() {
var values = this.value.split(",");
var checkboxes = document.querySelectorAll(`input[name='user_id[]']`);
checkboxes.forEach(cb => cb.checked = values.includes(cb.value));
});
<input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64" />
<br>
<input type="checkbox" name="user_id[]" value="61" />
<input type="checkbox" name="user_id[]" value="62" />
<input type="checkbox" name="user_id[]" value="63" />
HTML
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" /><label for="cat_1">cat_1</label><br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" /><label for="cat_2">cat_2</label><br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" /><label for="cat_3">cat_3</label><br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" /><label for="cat_4">cat_4</label><br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" /><label for="cat_5">cat_5</label><br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" /><label for="cat_6">cat_6</label><br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" /><label for="cat_7">cat_7</label><br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" /><label for="cat_8">cat_8</label><br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" /><label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Javascript
function calcAndShowTotal(){
var total = 0;
$('#catlist :checkbox[checked]').each(function(){
total =+ parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#pricelist :checkbox').click(function(){
calcAndShowTotal();
});
calcAndShowTotal();
I am getting particular value. WHY? I tried sum of total, i tried jquery but no success..
Use $('#catlist :checkbox:checked') selector to select checked check-boxes
[] is used as attribute selector and it could be used as '[type="checkbox"]' but it will not filter checked check-boxes
+ operator is not needed before parseFloat, it has to be total =+
Instead of calling handler, just invoke change handler using .change()
function calcAndShowTotal() {
var total = 0;
$('#catlist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Using Array#reduce
function calcAndShowTotal() {
var total = [].reduce.call($('#catlist :checkbox:checked'), function(a, b) {
return a + +$(b).attr('price') || 0;
}, 0);
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Instead of looping you can use change which will respond to and change event on the checkbox. Also you need add or subtract value like this += for addition on -= for subtraction
var _total = 0;
$('input[type="checkbox"]').change(function() {
if($(this).is(':checked')){
_total += parseFloat($(this).attr('price')) || 0;
}
else{
_total -= parseFloat($(this).attr('price')) || 0;
}
$('#total').val(_total);
})
JSFIDDLE
$('input:checkbox').change(function(){
var totalprice=0;
$('input:checkbox:checked').each(function(){
totalprice+= parseFloat($(this).attr('price'));
});
$('#total').val(totalprice)
});
I want chkbox1 to call a javascript function for txtbox1, chkbox2 to call the same function but for txtbox2, and so on.
To take it a step further, I want all checkboxes checked in their default state and I want the functions to run when unchecked.
How can I achieve this?
I only know simple way for one checkbox:
function OnChangeCheckbox(checkbox) {
if (checkbox.checked) {
alert("The check box is checked.");
} else {
alert("The check box is not checked.");
}
}
<input type="checkbox" value="yes" checked onclick="OnChangeCheckbox (this)" />
<label for="checkbox">uncheck box</label>
If your checkboxes and textboxes have something in common then you can do something like this:
<input type="checkbox" checked id="chk1" onclick="myFunction(this)" />
<input type="checkbox" checked id="chk2" onclick="myFunction(this)" />
<input type="checkbox" checked id="chk3" onclick="myFunction(this)" />
<input type="checkbox" checked id="chk4" onclick="myFunction(this)" />
<input type="text" id="txt1" />
<input type="text" id="txt2" />
<input type="text" id="txt3" />
<input type="text" id="txt4" />
<script>
function myFunction(el) {
var txt = document.getElementById(el.id.replace('chk', 'txt'));
if(el.checked) {
txt.value = 'checked';
}
else
txt.value = 'unchecked';
}
</script>
function myFunction(el) {
var txt = document.getElementById(el.id.replace('chk', 'txt'));
if(el.checked) {
txt.value = 'checked';
}else{
txt.value = 'unchecked';
}
}
<div>
<input type="checkbox" checked id="chk1" onclick="myFunction(this)" />
<input type="text" id="txt1" />
</div>
<div>
<input type="checkbox" checked id="chk2" onclick="myFunction(this)" />
<input type="text" id="txt2" />
</div>
<div>
<input type="checkbox" checked id="chk3" onclick="myFunction(this)" />
<input type="text" id="txt3" />
</div>
<div>
<input type="checkbox" checked id="chk4" onclick="myFunction(this)" />
<input type="text" id="txt4" />
</div>
You can create separate functions
function OnChangeCheckbox1(checkbox) {
..
}
<input type="checkbox" value="yes" checked onclick="OnChangeCheckbox1(this)" />
<label for="checkbox">uncheck box</label>
function OnChangeCheckbox2(checkbox) {
..
}
<input type="checkbox" value="yes" checked onclick="OnChangeCheckbox2 (this)" />
<label for="checkbox">uncheck box</label>
Update Answer
hi, i just update my answer, so your function run if unchecked and get the value of checkbox
<input type="checkbox" checked value="1" onclick="myFunction(this)" />
<input type="checkbox" checked value="2" onclick="myFunction(this)" />
<input type="checkbox" checked value="3" onclick="myFunction(this)" />
<input type="checkbox" checked value="4" onclick="myFunction(this)" />
<script>
function myFunction(e) {
if(e.checked == false) {
alert('this box unchecked | value = ' + e.value);
}
}
</script>
<div class="check_filter">
<div id="filter">
<input type="checkbox" id="check1" /><label for="check1">XYZ</label>
<input type="checkbox" id="check2" /><label for="check2">WAS</label>
<input type="checkbox" id="check3" /><label for="check3">DEF</label>
</div>
</div>
Js code :
$(document).ready(function() {
$(":checkbox").click(function(){
var id = $(this).attr('id');
var isChecked = $(this).attr('checked'));
if(isChecked == false){
switch (id) {
case check1:
txtbox1();
break;
case check2:
txtbox2();
break;
default:
defaultFunction();
}
}
});
});