My for loops are fine and I got the value for both transportationOutput and trasportation2 and I want to check if both values are equal checked the right checkbox input, but it does not get into if condition and I do not know why, I try to replace the == to === but also it does not work
trasportation = "car-train" //value from database
var trasportation2 = document.getElementsByName("transportation");
var transportationOutput = trasportation.split("-");
for (var i = 0; i < transportationOutput.length; i++) {
for (var j = 0; j < trasportation2.length; j++) {
if (trasportation2[j].value == transportationOutput[i]) {
trasportation2[j].checked = true;
}
}
}
<label>transportation</label>
<input type="checkbox" id="localTransportID" name="transportation" value="car"> car
<input type="checkbox" id="localTransportID" name="transportation" value="bus"> bus
<input type="checkbox" id="localTransportID" name="transportation" value="train"> train
<input type="checkbox" id="localTransportID" name="transportation" value="airplane"> airplane
Related
How to enable the input in checkbox if i check the checkbox?
It always disable when I check the checkbox with input type.
function ckChange(ckType) {
var ckName = document.getElementsByName(ckType.name);
var checked = document.getElementById(ckType.id);
if (checked.checked) {
for (var i = 0; i < ckName.length; i++) {
if (!ckName[i].checked) {
ckName[i].disabled = true;
} else {
ckName[i].disabled = false;
}
}
} else {
for (var i = 0; i < ckName.length; i++) {
ckName[i].disabled = false;
}
}
}
<input type="checkbox" placeholder="toBeReturn" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)"> For use in showroom to be return on
<input type="date" name="progress" id="progress3" placeholder="date">
<br/>
<input type="checkbox" placeholder="OnLoan" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)"> On Loan
<br/>
<input type="checkbox" placeholder="Other" name="progress" id="progress6" value="1" tabIndex="1" onClick="ckChange(this)"> Other
<input type="text" name="progress" id="progress3" placeholder="State the Purpose">
I need help to complete my project thank you!
Simply switch around what you have in the "if" and "else" statement so that the opposite happens.
Also, if you're loading the page with the checkbox unchecked, also add "disabled" to the text input so it matches.
function ckChange(ckType) {
var ckName = document.getElementsByName(ckType.name);
var checked = document.getElementById(ckType.id);
if (checked.checked) {
for (var i = 0; i < ckName.length; i++) {
ckName[i].disabled = false;
}
} else {
for (var i = 0; i < ckName.length; i++) {
if (!ckName[i].checked) {
ckName[i].disabled = true;
} else {
ckName[i].disabled = false;
}
}
}
}
<th>
<input type="checkbox" placeholder="toBeReturn" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)"> For use in showroom to be return on <input type="date" name="progress" id="progress3" placeholder="date" disabled>
</th>
I think the problem is that your 'for' statement, the 'for' statement matched all the check-boxs including the one you checked which you need exclude from then, so you may try it like this:
function ckChange(ckType) {
var ckName = document.getElementsByName(ckType.name);
var checked = document.getElementById(ckType.id);
if (checked.checked) {
for (var i = 0; i < ckName.length; i++) {
if(ckName[id].id !==checked.id){
ckName[i].disabled = false;
}
}
} else {
for (var i = 0; i < ckName.length; i++) {
if(ckName[id].id !==checked.id){
if (!ckName[i].checked) {
ckName[i].disabled = true;
} else {
ckName[i].disabled = false;
}
}
}
}
}
I have a set of books in checkboxes which a user can select. Every time a book is checked the price adds up. I also need to add its corresponding weight. I've modified this very useful example but to no avail.
<label class="checkbox" for="Checkbox1">
<input value="50" type="checkbox" class="sum" data-toggle="checkbox"> Instagram
</label>
<label class="checkbox">
<input value="50" bweight=".4" type="checkbox" class="sum" data-toggle="checkbox"> Review site monitoring
</label>
<label class="checkbox">
<input value="30" bweight=".2" type="checkbox" class="sum" data-toggle="checkbox"> Google+
</label>
<label class="checkbox">
<input value="20" bweight=".6" type="checkbox" class="sum" data-toggle="checkbox"> LinkedIn
</label>
<div class="card-charge-info">
<span id="payment-total">0</span>
</div>
var inputs = document.getElementsByClassName('sum'),
total = document.getElementById('payment-total');
totwgt = document.getElementById('payment-w');
for (var i = 0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
var add = this.wgt * (this.checked ? 1 : -1);
total.innerHTML = parseFloat(total.innerHTML) + add
totwgt.innerHTML = parseFloat(total1.innerHTML) + add
}
}
Heres the code https://jsfiddle.net/u8bsjegk/2/
There's several issues in your code. Firstly you define the add variable in two places, one for the value the other for weight so your calculation is broken from there. Also note that bweight is not a valid attribute on the input element. To add your own meta data you should use a data-* attribute instead.
Try this:
var inputs = document.getElementsByClassName('sum'),
totalValue = document.getElementById('payment-total'),
totalWeight = document.getElementById('payment-w');
for (var i = 0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var value = parseFloat(this.value);
var weight = parseFloat(this.dataset.weight);
totalValue.innerHTML = parseFloat(totalValue.innerHTML) + value
totalWeight.innerHTML = parseFloat(totalWeight.innerHTML) + weight
}
}
As you've tagged this question with jQuery, here's a working implementation for that
var $inputs = $('.sum'),
$totalValue = $('#payment-total'),
$totalWeight = $('#payment-w');
$inputs.change(function() {
var value = parseFloat(this.value);
var weight = parseFloat($(this).data('weight'));
$totalValue.text(function(i, text) {
return parseFloat(text) + value;
});
$totalWeight.text(function(i, text) {
return parseFloat(text) + weight;
});
})
Working example
You have few issues:
You redeclare add variable
you have typo in total1 it should be totwgt
you don't have element with payment-w id
instead of this.wgt you should use this.getAttribute('bweight')
https://jsfiddle.net/u8bsjegk/6/
I need to disable all the radio buttons; the best approach is by using javascript but i am not too good at it; I try looping the ids but it was a disaster!
i end up using 6 lines to disable each radio button at a time; can I do this a little more efficiently
document.getElementById("radio1").disabled = true;
document.getElementById("radio2").disabled = true;
document.getElementById("radio3").disabled = true;
document.getElementById("radio4").disabled = true;
document.getElementById("radio5").disabled = true;
document.getElementById("radio6").disabled = true;
Radio Buttons:<br>
<input type="radio" id="radio1">1<br>
<input type="radio" id="radio2">2<br>
<input type="radio" id="radio3">3<br>
<input type="radio" id="radio4" checked>4<br>
<input type="radio" id="radio5">5<br>
<input type="radio" id="radio6">6
You can use querySelectorAll() to select all inputs with type="radio" and then use loop to set disabled = true on each one
var inputs = document.querySelectorAll('input[type="radio"]');
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = 'true';
}
Radio Buttons:
<br>
<input type="radio" id="radio1">1<br>
<input type="radio" id="radio2">2<br>
<input type="radio" id="radio3">3<br>
<input type="radio" id="radio4" checked>4<br>
<input type="radio" id="radio5">5<br>
<input type="radio" id="radio6">6
Not sure why looping was a disaster. Here's how I would do it:
for (var i = 1; i <= 6; i++) {
document.getElementById("radio" + i).disabled = true;
}
Alternatively:
var ids = ['radio1', 'radio2', 'radio3', 'radio4', 'radio5', 'radio6'];
ids.forEach(function (id) {
document.getElementById(id).disabled = true;
});
You can use css selector (document.querySelectorAll):
var radios = document.querySelectorAll("[id^='radio']"); //get all elements that have an id starting with 'radio'
for (var i = 0; i < radios.length; i++) {
radios[i].disabled = true;
}
You could do something along these lines
// load all the inputs in the document into memory
var inputs = document.getElementsByTagName("input");
// loop over them, and set the disabled attribute on each of them
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
Note that by doing document.getElementsByTagName("input"), you collect all the inputs in your page, so a better approach would be to wrap them in a container, and do the expression on it, like this:
<div id="input-container">
<input type="radio" id="radio1">
...
</div>
and then
var container = document.getElementById("input-container");
var inputs = container.getElementsByTagName("input");
the loop remains the same
I want to give each check box an integer value and then if the box is checked add the values and display the total in a text box with the ID="options". So far the code is not sending a value to the desired location. Any instruction on how to improve the code would be helpful. Thank you.
<html>
<body>
<form id="registration" name="registration">
<input name="opt1" value="5" type="checkbox"> Breakfast ($5)
<input name="opt2" value="10" type="checkbox"> Lunch ($10)
<input name="opt3" checked="checked" value="0" type="checkbox"> Happy Hour (free!)
<input id="options" name="options" type="text">
</form>
</body>
</html>
<script>
function getOptions() {
var form = document.getElementById("registration"),
inputs = form.getElementsByTagName("input"),
result = 0;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type === "checkbox" && inputs[i].checked) {
result += inputs[i].value;
document.getElementById("options").value = result;
}
}
}
getOptions();
</script>
You may need to attach onchange event handlers to the checkboxes as shown below. And you should parse inputs[i].value to a number using parseFloat() before adding it to result.
var form = document.getElementById("registration"),
inputs = form.getElementsByTagName("input");
function getOptions() {
var result = 0;
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type === "checkbox" && inputs[i].checked) {
result += parseFloat(inputs[i].value);
}
}
document.getElementById("options").value = result;
}
for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type === "checkbox") {
inputs[i].onchange = function () {
getOptions();
}
}
}
getOptions();
JSFiddle
I'm having a problem trying to create a Javascript function that checks all the checkboxes in a form.
An example of the checkboxes on my form look like
<b>A:</b> <input type="checkbox" name="multipleForms[201][A]"><br>
<b>B:</b> <input type="checkbox" name="multipleForms[201][B]"><br>
<b>C:</b> <input type="checkbox" name="multipleForms[201][C]"><br>
<b>D:</b> <input type="checkbox" name="multipleForms[201][D]"><br>
<b>A:</b> <input type="checkbox" name="multipleForms[500][A]"><br>
<b>B:</b> <input type="checkbox" name="multipleForms[500][B]"><br>
<b>C:</b> <input type="checkbox" name="multipleForms[500][C]"><br>
And what I want to do is be able to pass a number such as 201 and 500 into a Javascript function and have all checkboxes with the first array index as that integer be checked.
So, checkAll(201) would have the first 4 checkboxes checked and checkAll(500) would have the other 3 checkboxes checked.
I would rather not change the names of my checkboxes if that is possible as the stringed indexes are really important for my PHP code.
Thanks in advance.
Also, I would rather have non-jQuery code.
Something like that ? : http://jsfiddle.net/RZPNG/6/
var checkboxes = document.getElementsByTagName('input');
function check(num) {
for (var i = 0; i < checkboxes.length; i++) {
if (parseInt(checkboxes[i].name.split('[')[1]) === num) {
checkboxes[i].checked = 'checked';
}
}
}
check(201);
Something like the following should do:
function checkBoxes(form, s) {
var input, inputs = form.getElementsByTagName('input');
var re = new RegExp(s);
for (var i=0, iLen=inputs.length; i<iLen; i++) {
input = inputs[i];
if (input.type == 'checkbox' && re.test(input.name)) {
input.checked = true;
} else {
input.checked = false;
}
}
}
You could also use querySelectorAll, but support isn't that common yet:
function checkBoxes(s) {
var els = document.querySelectorAll('input[name*="' + s + '"]');
for (var i=0, iLen=els.length; i<iLen; i++) {
els[i].checked = true;
}
}