Develop Reference

While submitting a list jquery is not able to get the selected check box

I have a list with checkbox. I am submitting the checked rows but before submitting i am validating the list whether it have any checked values or not, for that i have written a jQuery.
jQuery(function(){
jQuery("#newDeliveredAll").click(function () {
if(jQuery('.notClosedCase').prop('checked')) {
jQuery(".notClosedCase").click(function(){
if(jQuery(".notClosedCase").length == jQuery(".notClosedCase:checked").length) {
jQuery("#newDeliveredAll").attr("checked", "checked");
} else {
jQuery("#newDeliveredAll").removeAttr("checked");
}
});
return true;
}else {
alert(" Please select atleast one order ");
return false;
}
});
});
But the issue which i am facing is, when the first row is not checkedeven tho if i have checked multiple rows and left the first row, its showing the same alert written in else part

You checked condition like below.
if(jQuery('.notClosedCase').prop('checked'))
This condition is true when all the checkbox is checked which has notClosedCase class. If any of the checkbox not checked, it is return false. so only you got false block.
Please use below condition.
if (jQuery('.notClosedCase:checked').length > 0)
Fiddle
Hope this will help you.

Image based Checkbox is checked but the values not added to text field

First of all I thank everyone for helping me. I'm new to jQuery and JavaScript. I want to pass the check-box value to text field when it is checked. when I checked using the image in anchor it is not passing the values, but it does when checked checkbox directly.
Below is my live code, please check where I did mistake.
Pretty checkbox code:
$(document).ready(function() {
$('span.mktLblRight input').each(function(){
$(this).next('label').andSelf().wrapAll('<p/>');
});
$("li.mktLblRight").wrapAll('<span class="checkbox-align"/>');
$("span.mktLblRight").addClass("checklist");
$("span.checklist p").append('<a class="checkbox-select" href="#">Select</a><a class="checkbox-deselect" href="#">Cancel</a>');
// code from here on is the same as Aaron Weyenberg
$(".checklist .checkbox-select").click(
function(event) {
event.preventDefault();
$(this).parent().addClass("selected");
$(this).parent().find(":checkbox").prop("checked","checked");
this.checked = true;
}
);
$(".checklist .checkbox-deselect").click(
function(event) {
event.preventDefault();
$(this).parent().removeClass("selected");
$(this).parent().find(":checkbox").removeProp("checked");
this.checked = true;
}
);
});
http://jsfiddle.net/5euSB/109/

The issue is that you're programmatically changing the value of the input field with:
$(this).parent().find(":checkbox").removeProp("checked");
This doesn't trigger the change event. A quick solve is to just manually trigger the change with:
$(this).parent().find(":checkbox").removeProp("checked").trigger('change');
An update of your sample: http://jsfiddle.net/5euSB/111/

Javascript disable submit unless all text areas filled

I have varied textareas in a form that I wish to be completed before the submit button is activated. I have researched into this and already found how to specify particular textareas/inputs however dependent on the user group will be dependent on how many text areas are shown so I need a blanket javascript to just check that any textareas shown on the page are filled before the submit button is activated.
I have looked at this: http://jsfiddle.net/qKG5F/641/ however have not managed to successfully implement it myself.
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
Could this be because of how I have created my textareas? As shown below
<textarea name="i_2" id="i_2" class="input-block-level"></textarea>
Instead of using <input> as the JSFiddle example does above.
Is there any way to disable the submit button if not all textareas have been filled (without specifying each textarea)? I have edited my submit button accordingly with the JSFiddle example.

In HTML5 you can actually use a very simple "required" command to make any form elements a required field before the submit button is activated. It removes the need for any unnecessary JavaScript.
<textarea name="i_2" id="i_2" class="input-block-level" required></textarea>
give it a try :) stuff like this is why I love HTML5

Why do you think that textarea is an input? Here is the code for the situation when you have inputs and textareas in one form, and you want the button to be disabled if one of the inputs or textareas is empty. Input and textarea are different html elements! You can't select textarea with "input".
(function() {
$('form > input, form > textarea').keyup(function() {
var empty = false;
$('form > input, form > textarea').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
For only textareas use:
$('form > textarea')
Better approach is to use class name, for example "must_be_filled" and assign this class to any html element.
The you can select elements by:
$('form > .must_be_filled')
Try this:
http://jsfiddle.net/g0m79p81/

js checkbox NOT set a custom value if not checked

I am working on a form that someone else created that passes through information to Salesforce. But regardless of where it sends values to, the checkbox doesnt seem to behave as it should.
No matter checking or unchecking the checkbox, it will always output the 'xxx' value.
The javascript sets the value of another checkbox inside salesforce based on the first checkbox. If that checkbox is checked, set the 'optin' value to true, if not false.
I feel I need another line of code that says: if checkbox is checked then value=xxx. if not checked, nothing. Then based on that, the other if else can be run.
here is the html:
<input type="checkbox" value="xxx" id="industry_optin" name="industry_optin"> YES
This is the js: (it is part of a bigger part of js, so there is no close bracket)
$(document).ready(function() {
$('#industry_optin').on('change', function() {
if ($(this).prop('checked') === true) {
$('#optin').prop('checked', true);
} else {
$('#optin').prop('checked', false);
}
});

Your code has errors because of }); ending of code.
$(document).ready(function() {
$('#industry_optin').on('change', function() {
if ($(this).prop('checked') === true) {
$('#optin').prop('checked', true);
} else {
$('#optin').prop('checked', false);
}
});
});
Fiddle

Trigger functions from checkbox on click by clicking on a button

I have a couple of checkboxes and a button. When I click on checkbox - function is triggered. This is the desired behavior but I want to trigger it by clicking on the button. I want to have the possibility to first select checkboxes (I tried with return false and event.preventDefault but these completely switch the selection off) and then by clicking the button - trigger functions from checkboxes. Here is a link to jsfiddle:
http://jsfiddle.net/j93k2xns/6/
So for instance: I can select 3 checkboxes (nothing should happen) and after I click the button - three alerts should appear.
The code:
HTML:
<input type="checkbox" name='check[]' id="first">first</input>
<input type="checkbox" name='check[]'>second</input>
<input type="checkbox" name='check[]'>third</input>
<input type="checkbox" name='check[]'>fourth</input>
<input type="button" value="validate" id="val-button">
JS:
var check_state;
$(document).on('click','input[name="check[]"]', function(e){
if(check_state === true) {
alert('a');
} else {
return false;
}
});
$(document).on('click','#val-button', function(){
check_state = true;
});

There are a few interpretations to his question. If I'm reading it correctly, he wants to bind an arbitrary function to the checkboxes. Clicking the button should fire this event. This is how you can achieve that using custom events in jQuery:
$(function () {
$("input[name='check[]']").bind("myCustomButtonClick", function() {
if(this.checked) {
alert('a');
}
});
})
$(document).on('click','#val-button', function(){
$("input[name='check[]']").trigger("myCustomButtonClick");
});
And the associated jsfiddle: http://jsfiddle.net/3yf7ymos/

$(document).on('click','#val-button', function(){
$( 'input[name="check[]"]' ).each(function( index ) {
if($(this).is(':checked')) {
alert("a");
return true;
}
});
});

If you want to do something when the user checks a checkbox, add an event listener:
$('input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
// do something
}
});
If the idea is run a couple of functions after the inputs are checked by clicking on a button:
function myFunction() {
if ($('input[id="something"]:checked').length == 0) {
// do something
} else if ($('input[id="something_2"]:checked').length == 0) {
// do something
}
//and so on..
}
$('#val-button').click(function() {
myFunction();
});

I have a similar inquiry. I have a number of check boxes. Each checkbox is linked to a different URL that opens a PDF form. I want my team to be able to select which forms they need by ticking the checkbox. Once they have done that, I would like a button to trigger the opening of each form based on which check box is checked. I have it so the checkbox upon being checked opens the form right away but it is very distracting. Its preferable they all get opened at once by a "button". Help. I am quite new to JavaScript so may need additional clarity.