Check boxes contradicting each other - javascript

I have a project that is "almost" done. I've gotten a ton of help here and I'm hoping I'll be able to finalize this project soon. I have a form with checkboxes that represent different attributes for 3 different items. As a user checks a specific checkbox I have whichever item that it does not correspond to hide, as well as any attribute that does not go with the one that was checked becomes disabled and the text color turns a light grey. So the only boxes that would still be active would be the ones that go together for said item.
I can get that all to work just fine (I think). But there are a few attributes that correspond to more than one item. If you look at my example (link provided)
If you check the 'Economy' chekcbox only 1 grey box 'Bernini' is displayed and a lot of other checkboxes become disabled, which is correct. Un-check it and everything is enabled and visible again.
If you check the 'Tape-in Bottom Rail' checkbox 2 grey boxes 'Bernini & Picasso' are displayed which is also correct as that attribute 'Tape-in Bottom Rail' applies to both. Un-check it and everything is enabled and visible again.
The issue I have is, IF you check both the 'Economy' & 'Tape-in Bottom Rail' then Un-check either of them, the wrong attributes become enabled and the visible grey boxes no longer correspond correctly.
I though I should use an 'else if' or another 'if' statement but if so I have not figured out how to get it to work correctly.
Here is the JS I'm using so far, this is for only 1 of the functions.
function bannerBernini() {
if (document.checkForm1.att_2.checked || document.checkForm1.att_5.checked || document.checkForm1.att_6.checked || document.checkForm2.att_9.checked || document.checkForm2.att_15.checked || document.checkForm3.att_23.checked)
{
var berninis = document.querySelectorAll('.picasso, .matisse, .picasso-matisse');
for (var i = 0; i < berninis.length; i++) {
berninis[i].style.color="#d1d1d1";}
var not_bernini = document.querySelectorAll('#att_3, #att_10, #att_11, #att_13, #att_14, #att_16, #att_17, #att_18, #att_19, #att_20, #att_21, #att_22, #att_24');
for (var j = 0; j < not_bernini.length; j++){
not_bernini[j].disabled=true;}
document.getElementById("Picasso").style.display="none";
document.getElementById("Matisse").style.display="none";
}
else
{
var berninis = document.querySelectorAll('.picasso, .matisse, .picasso-matisse');
for(var i = 0; i < berninis.length; i++) {
berninis[i].style.color="";}
var not_bernini = document.querySelectorAll('#att_3, #att_10, #att_11, #att_13, #att_14, #att_16, #att_17, #att_18, #att_19, #att_20, #att_21, #att_22, #att_24');
for (var j = 0; j < not_bernini.length; j++){
not_bernini[j].disabled=false;}
document.getElementById("Picasso").style.display="";
document.getElementById("Matisse").style.display="";
}}
Here is the sample which I hope makes sense:
http://jsfiddle.net/g_borg/48uhn/1/
Thanks in advance for any assistance. I know some will say I should use jQuery, I would but as this is my 1st time trying to code with javascript and I'm not familiar with jQuery I'd prefer to try to keep this where I still understand the code.

Related

Click all checkboxes on a webpage with HTML script (quickbooks/Safar)

So I created the following script to select all check boxes on a page
(function(d) {
var input = d.querySelectorAll('input[type="checkbox"]');
var i = input.length;
while (i--) {
input[i].checked = true;
}
})(this.document);
It does work to do that, however when trying it in Quickbooks while it does select all the boxes, the website does not register it as actually being selected (the total cost at the bottom remains the same, its like it superficially checks the boxes, visually only with no actual register). Any help would be great.
EDIT: Maybe simulating a click instead of changing the box values?
The only thing that changes when physically selecting a box is the value posted below changes to true from false
You should do :
input[i].setAttribute("checked", "");
The checked attribute is a boolean attribute, so the standard way to add it to an element is to pass an empty string for value.
https://developer.mozilla.org/fr/docs/Web/API/Element/setAttribute#Exemple

Jquery dynamic validations html

I'm working in javascript/jQuery forms filling and validation. However I have a following scenario that I want using for-loops.
I've 3 fields in one container, and I have total 4 containers, The first box is must, scha that the first item input text "A" should be validated. And second is radio button, having their respective input fields, so the check is must that which radio button is pressed and made that field validated and the other is not. Let the radio button is Option B and their respective input text boxes are C and D.
Now The rest of there have the same case when there activator check box is checked otherwise no validation. Let my checkBoxes are X. So my code is:
My Code is 70% working, don't know why. Also, I want to check it back, that if the checkboxes aren't clicked(such that unchecked after clicked) it removes all the validations for the upcoming containers.
I've my custom javascript function of validating check boxes names checkRadioand makeRequire/makeUnrequire that accepts an array of input and make all of them as said.
How can I implement the optimal solution for such scenario.
for (var i = 1; i <=3; i++) {
if (checkRadio("X-"+i))
{
for (var j = 2; j <=4; j++) {
for (var k = 1; k <=3; k++) {
if (checkRadio("B"+j+"-1")) {
makeRequired(["C-"+k]);
makeUnRequired(["D-"+k]);
} else if (checkRadio("B"+j+"-2")) {
makeUnRequired(["C-"+k]);
makeRequired(["D-"+k]);
}
};
};
}
My Id's conventions are, A-1, A-2, A-3 and A-4 for first text field.
B1-1 and B1-2 for respective text fields C-1 and D-1 for first container.

JavaScript - removing previous fieldset once radio button is selected

I am trying to modify this JSFiddle I found because it's almost exactly what I am looking for. Currently all previous decisions are shown, I don't want the previous decisions to show. I just want one answer up at a time. So once you click a radio button I want that question to disappear and to display the next question. I've been playing about with the code for a while and can't figure it out, but I'm not knowledgable enough.
I'm sure it's somewhere in here:
$('fieldset.option0').removeClass('hide');
for (i = 0; i < options.length; i += 1) {
options_buffer += options[i];
$('fieldset.option' + options_buffer).removeClass('hide');
}
I've managed to only remove it from the very first click, but after that, all decisions show up.
Here is the JSFiddle - http://jsfiddle.net/danw/h8CFe/
Here is a modified jsFiddle with the desired behavior: http://jsfiddle.net/h8CFe/121/
I modified the last lines of the update function to this:
fieldsets.addClass('hide');
for (i = 0; i < options.length; i += 1) {
options_buffer += options[i];
}
$('fieldset.option' + options_buffer).removeClass('hide');
Looking at the code you can just add hide class to the fieldset you want to hide. For example on clicking first set of radio button you can call $('.step1').addClass('hide') to hide that fieldset.

count checkboxes in a form using javascript

I have quite a lot of check boxes on one form. The check boxes are in different sections of the form. I would like to count the number of checkboxes at the end of each section on my form.
For example I have 6 sections within my form and I have between 6 and 10 checkboxes within each section. I would like to have a textbox with a number value at the end of each section telling me how many check boxes were check within that particular section.
Does anyone have a script for that? I have a snippet from support staff but they don't have a full solution and I don't know JavaScript well enough to finish it. I'm through trying to figure it out so i can finish it. Here is the snippet they sent me:
<script type="text/JavaScript">
function countcheck(checkName){
inputElems = document.getElementsByName(checkName);
count = 0;
for (i = 0; i < inputElems.length; i++) {
if (inputElems.checked === true) {
count++;
document.getElementById("teval_engage7").value = count;
}
}
}
</script>
The script will only count checked checkboxes within that group only. Basically you will need a function for each of your checkbox so that you can have separated counters. This will also require an attribute to your checkbox according to the function in question:
onclick="countcheck(this.name);"
var cb_counts = {};
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type = 'checkbox' && input.checked) {
if (cb_counts[input.name]) {
cb_counts[input.name]++;
} else {
(cb_counts[input.name] = 1);
}
}
}
Now the object cb_counts contains properties with the name of each group of checkboxes, and the values are the counts. Do with this what you wish.
Thanks for the quick reply. I use a application call rsform which helps to make forms. On the script I have "teval_engage7" is the text box which stores the value of the number of checkboxes that have been checked. "onclick="countcheck(this.name);"" is the trigger I place under each checkbox question. So when I go to the form and click on a checkbox with that trigger attached to it, the value of "1" shows up in the teval_engage7 text box. The next check box I click on then shows "2" in the teval_engage7 text box. My question is, can you te me using this script you wrote where the values are stored so I can substitute that name for my textbox name. Also, do I use my same trigger "onclick="countcheck(this.name);"" to attach to my checkbox attibute area to trigger the count?
Thanks

Show/hide table row based on value of a cell

I am using the range slider from JQuery-UI (http://jqueryui.com/slider/#range) which a user uses to pick a price range, and I want to show/hide table rows depending on whether or not they fall inside the range selected by the user.
This is what I have found from other answers: the following code hides the table row that has a cell in column 9 containing the value 10.
$("tr").find("td:nth-child(9):contains(10)").parent().hide();
What I am trying to do is "hide where the value in the cell is less than 10".
I have tried the following:
$("tr").find("td:nth-child(9):lt(10)").parent().hide();
But ":lt" is a method that applies to indexes, not values (I think).
Can anyone help me out please?
You're not going to be able to do this with selectors alone. You can use .filter for more specific functionality:
$("tr").find("td:nth-child(9)").filter(function () {
return parseInt($(this).text()) < 10;
}).parent().hide();
A brief note that :contains doesn't work very well for your first example either since it will apply to elements that contain "100."
Using some of your code from above, you could probably do something similar to this:
for(var i = 0; i < 10, i++) {
$("tr").find("td:nth-child(9):contains(" + i + ")").parent().hide();
}
You may have to add a few things to get what you need, but I think this should point you in the right direction!

Categories

Resources