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
Related
I am trying to create a JS function that will ensure all checkboxes in my form are selected.
I have tried the following, but it isn't working. There are other checkboxes in another from on this page so I am wondering if this is conflicting? I thought using $(this) would fix that issue...
$('#my-form').on('submit', function(e) {
e.preventDefault();
var checked = false;
$('#input[type="checkbox"]').each(function() {
if ($(this).is(":checked")) {
checked = true;
}
});
if (checked == false) {
console.log('Something wasnt checked');
}
});
Can any advise what I am doing wrong here please?
Your code checks if any of the checkboxes are checked.
Change the code to
var checked = true;
And set the variable to false, if the checkbox in the loop is NOT checked.
"#" is used to query elements by their ID, so $("#input") would target only one input that has id="input". You should instead do this:
$("input[type='checkbox']")
or, if you don't want all checkboxes on the page you will need to use some other selector, etc. add class "some-class" to all inputs that you want to check and use:
$(".some-class")
Also, you will need to revert your logic, cause currently you will set checked to true if any of the checkboxes is checked. So, initially use checked = true, then in if statement set it to false if it's not checked.
Just check :checked checkbox length based upon that set your variable like below.
$('input[type="checkbox"]').click(function() {
var checked = false;
if ($('input[type="checkbox"]:checked').length == $('input[type="checkbox"]').length)
checked = true;
if (checked == true)
console.log('checked');
else
console.log('false');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input checked="checked" type="checkbox">
<input checked="checked" type="checkbox">
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.
On my page I have a checkboxes like this:
<input id="check0" type="checkbox">
Each time user check or uncheck it I want to execute some jQuery code. Here's sample of this code:
$("input[type=checkbox]").click(function () {
if ($(this).is(':checked')) {
// Calculate something here
}
else {
// Or calculate something here
}
});
Here's the problem: if user will click on checkbox multiple time really quick, some of the code will be executed multiple times, because it will trigger click function every time, but browser will not change 'check' status that quick!
How to prevent this?
I thought to put something like:
$("input[type=checkbox]").click(function () {
if ($(this).is(':checked')) {
// Disable checkbox
$(this).disabled = true;
// Calculate something here
// Enable it back
$(this).disabled = false;
}
else {
// Or calculate something here
}
});
How can I make my code to execute exact in this sequence? Disable > then execute code > then enable back?
Thanks
You should use on change, not on click. Then check the prop checked. If checked, run code. If you want to disable, use attr.
Try this...
$("#check0").on("change", function () {
if($(this).prop("checked") == true){
alert("hey now");
$(this).attr("disabled","disabled");
} else {
//nothing
}
});
http://jsfiddle.net/Eddieflux/z3xfcmgk/
I am trying to make a javascript function similar to the following, except it will iterate through all the checkboxes when the user clicks the submit button:
$('.checkboxstatus').click(function(){
this.setAttribute('checked',this.checked);
if (this.checked && $(this).data("def") == 0){
//checkbox has changed
this.setAttribute('changed', 'yes');
}
else if(!this.checked && $(this).data("def") == 'checked')
{
//checkbox has changed
this.setAttribute('changed', 'yes');
}
else{
//no change in checkbox
this.setAttribute('changed', 'no');
}
});
When the user clicks submit, the function should be called and it should iterate through all checkboxes and see if the checkbox is checked and see if the data-def is checked or 0. If the checkbox is checked and data-def="checked" then nothing should happen. If the checkbox state is different from the data-def then an attribute ("changed") should be added to that checkbox with value of "yes". Any suggestions on how to go about this?
Your question almost gives you the answer. You need to attach a "submit" event handler to the form, then grab all input[type=checkbox] and set the "changed" attribute accordingly.
I'm not sure I get this, but the usual way to do something like this would be to set an initial state in data, then on submit, prevent the submit action, check all the checkboxes against that initial state data variable, and see if anything changed, if it did, trigger the native submit handler ?
var boxes = $('input[type="checkbox"]').each(function() {
$(this).data('initial_state', this.checked);
});
$('form').on('submit', function(e){
e.preventDefault();
var same_same = true;
boxes.each(function() {
if ( $(this).data('initial_state') !== this.checked ) { // has changed ?
$(this).data('changed', true);
same_same = false;
}
});
if ( ! same_same ) { // diffelent
this.submit();
} else {
alert('same same, but not diffelent!');
}
});
i want do something like this with a checkBox. if the user clicks on the checkbox, it should change its state (checked -> unchecked and vv. ).
my code:
$('#checkBoxStandard').change(function() {
clickedFormBoxen('standard');
});
function clickedFormBoxen(active){
if(active == 'standard'){
if( $('#checkBoxStandard').is(":checked")){
$('#checkBoxStandard').prop("checked", false);
}else{
$('#checkBoxStandard').prop("checked", true);
}
console.log('ac: '+$('#checkBoxStandard').is(':checked'));
}
Unfortunately, the checkbox will not be unchecked again. The fist time, the checkbox is getting checked, but if i click on it again, nothing happens, it's still checked.
I wish to use this code so i can change the state of the checkbox by function call and not just by user interaction.
Please help me and sorry for my english^^
Try
$('#checkBoxStandard').removeAttr("checked");
You mean something like this? (jsFiddle)
HTML
<input type="checkbox" id="checkbox">
<label for="checkbox">Hey,check me!</label>
JavaScript
var respond = true;
function manualCheck(state)
{
respond = false;
$('#checkbox').prop("checked", state);
}
$('#checkbox').change(function ()
{
if (!respond)
{
respond = true;
return;
}
// Your code
}
As i've mentionend in my comment to your question, with your function clickedFormBoxen you effectively revert the effect of a user interaction on the checkbox element. Thus it seems that you have to call the change handler from a click handler on your checkbox element (i've streamlined the code a bit):
function clickedFormBoxen(active) {
if (active == 'standard') {
$('#checkBoxStandard').prop("checked", !($('#checkBoxStandard').prop("checked")));
}
}
$(document).ready( function(){
$('#checkBoxStandard').change( function(e) {
clickedFormBoxen('standard');
1;
});
$('#checkBoxStandard').click(function(e) {
$('#checkBoxStandard').change();
1;
});
});