We Keep Coding

How can i get attribute value from a checkbox if it's checked?

Well, I have this text input that gets sum of all the attributes of "price" inside all checkboxes are checked.
now i can't get an attribute value from a checkbox.
here is my function:
function sum_options() {
var options = [];
$("#form-field-1-11-1").attr("price", 500);
$("#form-field-1-11-2").attr("price", 500);
$("#form-field-1-11-3").attr("price", 0);
$("#form-field-1-11-4").attr("price", 300);
$("#form-field-1-11-5").attr("price", 500);
$("#form-field-1-11-6").attr("price", 500);
$("#form-field-1-11-7").attr("price", 1250);
$("#form-field-1-11-8").attr("price", 500);
$("#form-field-1-11-9").attr("price", 700);
options[0] = $("#form-field-1-11-1");
options[1] = $("#form-field-1-11-2");
options[2] = $("#form-field-1-11-3");
options[3] = $("#form-field-1-11-4");
options[4] = $("#form-field-1-11-5");
options[5] = $("#form-field-1-11-6");
options[6] = $("#form-field-1-11-7");
options[7] = $("#form-field-1-11-8");
options[8] = $("#form-field-1-11-9");
var total = 0;
$.each(options, function() {
this.on("change", function() {
total += this.attr("price");
});
});
$("#sum-field").val(total);
}
thanks!!!

Your code is a lot more complex than it needs to be.
Firstly, you should use data-* attributes to assign custom data to an element. Creating your own non-standard attributes will mean your HTML is invalid and can lead to other issues. Also, if your code is relying on the price attribute, then it should be in the DOM when the page loads.
Secondly there's no need to build an array of single elements. You can select them all in to a single jQuery object and set a change() event handler on them in a single call. I grouped them by class in the below example.
Lastly you can get the total of all the prices by looping through the :checked boxes and adding up their prices. Try this:
$('.checkbox').change(function() {
var total = 0;
$('.checkbox:checked').each(function() {
total += parseFloat($(this).data('price'));
});
$("#sum-field").val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="form-field-1-11-1" class="checkbox" data-price="500" />
<input type="checkbox" id="form-field-1-11-2" class="checkbox" data-price="500" />
<input type="checkbox" id="form-field-1-11-3" class="checkbox" data-price="0" />
<input type="checkbox" id="form-field-1-11-4" class="checkbox" data-price="300" />
<!-- other checkboxes here... -->
<input type="text" id="sum-field" />

To get the value of the Value attribute you can do something like this:
$("input[type='checkbox']").val();
Or if you have set a class or id for it, you can:
$('#check_id').val();
$('.check_class').val();
However this will return the same value whether it is checked or not, this can be confusing as it is differnt to the submitted form behaviour.
To check whether it is checked or not, do:
if ($('#check_id').is(":checked"))
{
// it is checked
}

You just forgot to parse the return value to a number:
parseInt(this.attr("price"));
the attr() function is returning a string value.

Radio button clicks change function

We have two radio buttons when we change the button need to call function. Below is my code.
<input id="ordertype" type="radio" align="top" name="ordertype" value="NEW ORDER" checked="">
<input id="ordertype" type="radio" align="top" name="ordertype" value="ADDITIONAL ORDER (add items to previous order)">
Jquery code
jQuery(document).ready(function(){
$('input:radio[name="ordertype"]').change(function(){
if($(this).val() === 'ADDITIONAL ORDER (add items to previous order)'){
var removepages = 'boothlightingDiv';
}else{
var removepages = 'furnishingsprovidedDiv';
}
});
});
Call function ToggleDiv('boothsizeDiv', removepages);
Based radio button need to change the ToggleDiv function parameter.Any help?

I would do something like this:
http://jsfiddle.net/bobrierton/5Lc17p1t/1/
$(document).on('change', 'input[name=ordertype]', function() {
var value = $(this).val();
if (value == "ADDITIONAL ORDER (add items to previous order)") {
//whatever your trying to do
var removepages = 'boothlightingDiv';
}else{
//or whatever your trying to do
var removepages = 'furnishingsprovidedDiv';
}
alert(removepages)
});

instead of $(this) use $('input:radio[name="order type"]:checked') to access the one that is checked, because when one changes, they both change.

Javascript function adding checkboxes to a total number?

I have a function where I'm trying to add the total number of checkboxes ticked to a value that is already displayed in the textbox. The solution I have works but it doesn't update properly if I uncheck the boxes and click total again.
Is there a way I can fix this so that the textbox updates accordingly?
HTML
<td><input type="text" name="Yeses" id="NumberofRisks" class = "form-control" value ="<?php echo $row['Total-Score'];?> " style = "width:50px"></td>
Javascript
function sum()
{
sumField = document.getElementById("NumberofRisks");
var sum = sumField.value;
$("input[name^='yanswer']:checked").each(function(){
sum++;
});
sumField.value = sum;
}

You are updating the value of the input after every call to function sum().
Instead have the initial sum value.
Then every time use this value.
var initial = $("#NumberofRisks").val();
function sum()
{
$("#NumberofRisks").val(initial + $("input[name^='yanswer']:checked").length);
displayRating($("#NumberofRisks").val());
}

Keep the original value of the textbox in a variable. Add an event listener to the checkboxes that count the number of checked boxes and adds that number to the original value, then updates the textbox.
Something like this:
HTML:
<input type="checkbox" class="check" />
<input type="checkbox" class="check" />
<input type="checkbox" class="check" />
<input type="textbox" class="text" />
JS:
//Store the original value. The 5 here should be whatever was supposed to be in the textbox.
var originalValue = 5;
$('.text').val(originalValue);
$('.check').on('change', function() {
//Count the number of checked boxes and add it to the original value for display.
var checked = $('.check:checked').length;
$('.text').val(originalValue+checked);
});
Here's a fiddle.

Jquery total price with input box and radio buttons

I have the following simple Jquery code that takes your input number * price to provide total.
I also need to have it include options with radio buttons, if checked +add to total.
Can anyone help me so that I can be able to add radio button options to make this take the input + radio buttons to get total price?
** It would also be nice if the price was Live as you typed/radio checked rather than clicking submit, but does not have to.
I have this so far:
http://jsfiddle.net/4bitlabs/tpkpd/15/
HTML:
<p class="list">How many "Linear Feet" of boards do you have?</p>
<input id="amount" />
<div class="addon">Add Paint $10.00<input id="amount" type="radio"value="10.00" class="radio"/></div>
<div class="price">$<label for="amount">0.00</label></div>
JQuery:
$(function () {
$('#amount').change(function () {
var $this = $(this);
$('label').text((parseFloat($this.val()) * 20.00).toFixed(2))
});
});
Thanks in advance.

There are some problems with your HTML. IDs should be unique.
I've done a fairly major rewrite, which I think will do what you are looking for. There are other ways to do it as well, but it should get you started
<input id="amount1" class="amount" />
I've made the IDs unique, and given the input boxes a class.
<input id="amount2" type="radio" value="10.00" class="radio addOn" data-for="amount1" />
The radio buttons also have a class of "addOn" and are attached to an label via the "data-for" tag.
$(function () {
$('.amount').change(function () {
changeAmount($(this));
});
$('.addOn').change(function () {
var $original = $('#' + $(this).data('for'));
changeAmount($original);
});
});
There are two ways to change the amount, one via changing the input box with a class of amount, one via changing the radio button with a class of addOn. The only difference is that the radio button function figures out what input box it is associated with.
function changeAmount($element) {
var amount = 0;
amount = parseFloat($element.val()) * 20;
// this handles the case when the val is not filled in.
if (isNaN(amount)) {
amount = 0;
}
var id = $element.attr('id');
$('.radio:checked[data-for="' + id + '"]').each(function () {
amount += parseFloat($(this).val());
});
$('label[for=' + id + ']').text(amount.toFixed(2))
}
jsFiddle

Use checked property.
And you better do not use duplicated IDs.
$(function () {
$('#amount').change(function () {
var $this = $(this);
var addPoint = $('input[type="radio"]').prop('checked') ? 10 : 0;
$('label').text((parseFloat($this.val()) * 20.00 + addPoint).toFixed(2))
});
});

Passing jQuery objects to a function

Here is the working demo of what I want to achieve. Just enter some value in input and you might get what I want to achieve. (Yes, I got it working but stay on..)
But it fails when multiple keys are pressed together.
What I am trying :
I have screen which contains few enabled and few disabled input elements. Whenever user updates any value in editable input element, I want to update disabled input which had same value with user updated value.
HTML :
<input value="foo" /> // When User updates this
<br/>
<input value="bar">
<br/>
<input value="Hello">
<br/>
<input value="World">
<br/>
<input value="foo" disabled> // this should be updated
<br/>
<input value="bar" disabled>
<br/>
<input value="foo" disabled> // and this also
<br/>
<input value="bar" disabled>
<br/>
<input value="Happy Ending!">
<br/>
I tried this which I think will save me from multiple_clicks_at_a_time
JS:
$(":input:not(:disabled)").keyup(function () {
// Get user entered value
var val = this.value;
// Find associated inputs which should be updated with new value
siblings = $(this).data("siblings");
$(siblings).each(function () {
// Update each input with new value
this.value = val;
});
});
$(function () {
$(":input:not(:disabled)").each(function () {
// Find inputs which should be updated with this change in this input
siblings = $(":input:disabled[value=" + this.value + "]");
// add them to data attribute
$(this).data("siblings", siblings);
});
});
But I am not able to pass the selectors to keyup function and invoke .each on it.
PS:
My previous completely different try, working with single_click_at_a_time but I felt that I am unnecessarily traversing the DOM again and again so dropped this
$(":input").keypress(function () {
$(this).data("oldVal", this.value);
});
$(":input").keyup(function () {
var oldVal = $(this).data("oldVal");
$(this).data("newVal", this.value);
var newVal = $(this).data("newVal");
$("input:disabled").each(function () {
if (this.value == oldVal) this.value = newVal;
});
});

I would group those inputs first and bind a handler for enabled elements to apply to the group. See below,
var grpInp = {};
$(":input").each(function () {
if (grpInp.hasOwnProperty(this.value)) {
grpInp[this.value] = grpInp[this.value].add($(this));
} else {
grpInp[this.value] = $(this);
}
});
$.each(grpInp, function (i, el) {
el.filter(':enabled').keyup(function () {
el.val(this.value);
});
});
DEMO: http://jsfiddle.net/fjtFA/9/
The above approach basically groups input element with same value, then filters them based on :enabled and bind a handler to apply it to the group.

// Find associated inputs which should be updated with new value
siblings = $(this).data("siblings", siblings);
No. The .data method called with two arguments does not get, but set the data (and returns the current selection). Also, you should make your variables local:
var siblings = $(this).data("siblings");
Working demo