We Keep Coding

jQuery find checkbox status and alert if boxes unchecked using .find

I have a form with 9 check boxes. Each has a unique ID and name.
I am trying to use jquery .find to locate all checkboxes and confirm their status as checked or unchecked. The correct output would be if it finds an unchecked box it should show the alert "unchecked". With the code I have below, no matter how many are checked or unchecked then it still will show an alert box with "hello." In other words I think this is all having no affect.
Question1: what needs to be added or changed in order for this to actually perform a search for unchecked boxes in my one page form?
Question 2: if I wanted to have the jquery alert not only alert me if there are unchecked boxes but tell me which box of the 9 was unchecked, what do I need to add?
jQuery(document).ready(function() {
// on form submit
jQuery("#user_price_accept").on('submit', function() {
// to each unchecked checkbox
var test = jQuery(this).find('input[type=checkbox]:not(:checked)');
if(test){alert("unchecked");}
})
})
<form id="user_price_accept" onsubmit="return false">
<input type="checkbox" id="balance_due" name="balance_due" value="1">
<button type="submit">Accept</button>
</form>

From your code you aren't preventing the default of the form so it will be submitting normally. Also the variable test is an array so there will always be a value so you need to check the length.
And on another note, because you are using query you should just use the jquery submit function
jQuery( "#user_price_accept" ).submit(function( event ) {
event.preventDefault();
var test = jQuery(this).find('input[type=checkbox]:not(:checked)')
if(test.length > 0){alert("unchecked");}
});
If you want to then figure out which checkboxes are checked you need to loop over the result of test. Here I am just console logging the names of the inputs that arent checked. You might want to concat them into a string if you want them to appear in your alert
jQuery( "#user_price_accept" ).submit(function( event ) {
event.preventDefault();
var test = jQuery(this).find('input[type=checkbox]:not(:checked)')
test.each((i,element ) => {
console.log(element.name)
});
if(test.length > 0){alert("unchecked");}
});

You can use this:
jQuery(document).ready(function() {
// on form submit
jQuery("#user_price_accept").on('submit', function(e) {
// to each unchecked checkbox
var test = jQuery(document).find('input[type=checkbox]:not(:checked)');
console.log(test.length);
if (test.length) {
alert("unchecked");
}
})
})
<form id="user_price_accept">
<input type="checkbox" id="balance_due" name="balance_due" value="1">
<button type="submit">Accept</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Cant validate radio checked properly as DOM returns values before validation is executed

Sorry for the tittle might be quite confusing.
I have a radio check box, if clicked once it gets checked if clicked again it gets unchecked.
<label class='container'><p1 style='font-size: 14px'>Able to fit several products</p1>
<input type='radio' name='Delivery' id='Delivery' onclick='radio_check();'>
<span class=checkmark></span>
</label>
var radio = document.getElementById("Delivery")
if(radio.checked){
radio.checked = false;
}else{
radio.checked = true;
}
The problem with this code is that it will always return radio.checked = false. If the radio is unchecked and user checked it, this function would still return false because the value send to this is that the radio was checked, how can i fix this issue?
https://jsfiddle.net/o2ayejz9/

use checkbox instead of radio
https://jsfiddle.net/o2ayejz9/1/
<input type='checkbox' name='Delivery' id='Delivery' onclick='radio_check();'>
updated your fiddle

Dynamic Forms Angular 2 - Checkbox

I am new in Angular 2. I am trying to expand dynamic forms according to https://angular.io/guide/dynamic-form. I did input radios and work as I need. But now I am trying to do checkboxes, but there is a problem. I have a group of checkboxes and I get only boolean value, if some checkbox is checked. Bud I need values, which checkboxes is checked. There is my plunker: https://plnkr.co/edit/EhtpprYdXIFmYJG7Lzxg
Thanks for help!

I hope this would be the solution for you.
templet.html
<form [formGroup] = "myForm" (ngSubmit) = "confirmFlights(myForm.value)">
<ng-template ngFor [ngForOf]="flightList" let-flight let-i="index" >
<input type="checkbox" [value]="flight.id" formControlName="flightid"
(change)="flightids[i]=[$event.target.checked,$event.target.getAttribute('value')]" >
</ng-template>
</form>
component.ts
flightids array will have another arrays like this
[ [ true, 'id_1'], [ false, 'id_2'], [ true, 'id_3']...]
here true means user checked it, false means user checked then unchecked it.
The items that user have never checked will not be inserted to the array.
flightids = [];
confirmFlights(value){
//console.log(this.flightids);
let confirmList = [];
this.flightids.forEach(id => {
if(id[0]) // here, true means that user checked the item
confirmList.push(this.flightList.find(x => x.id === id[1]));
});
//console.log(confirmList);
}

Why it isn't working:
because you are using one formControl key (question.key === 'skills') for all 3 checkboxes.
<span *ngSwitchCase="'checkbox'">
<p *ngFor="let opt of question.options">
<input [formControlName]="question.key"
[id]="opt.key" type="checkbox" [value]="opt.key">
<label>{{opt.value}}</label></p>
</span>
How to deal with it:
You should use formControl key for each input (checkbox), to track model changes - this is how Angular forms works.
So, if you split your Checkbox.options to separate Checkbox, it would work:
in dynamic-form-question.component.html change Checkbox to:
<span *ngSwitchCase="'checkbox'">
<input [formControlName]="question.key"
[id]="question.key" type="checkbox" [value]="question.value">
</span>
in question.service.ts change Checkbox to:
new CheckboxQuestion({
key: 'fast',
label: 'Fast',
value: false,
order: 5
}),
Here is changed Plunker:
https://plnkr.co/edit/2XIfMU?p=preview

A checkbox or radio doesn't update automatically (at this point I'm not sure if this is caused by angular design or possibly due to MDN: DOM input event).
The usage of a template reference variable works but only for one FormControl within a FormGroup.
More elegant solution: you can set a FormControl's value (in a FormGroup) directly from the change event:
(change)="formGroup.controls[element.name].setValue($event.target.checked)"
Since FormControl.setValue's emitEvent, emitModelToViewChange and emitViewToModelChange default to true, it's seems not necessary to update other attributes manually.
Modified for angular's dynamic form (working example on stackblitz):
<input *ngSwitchCase="'checkbox'" [formControlName]="question.key"
[id]="question.key" [type]="question.type" (change)="form.controls[question.key].setValue($event.target.checked)">

Creating a check and uncheck all function in Angular Js

I have few check boxes which I have been check already using ng-init
<div class="checkbox">
<label>
<input type="checkbox" ng-init="model.A='A'" ng-model="model.A" ng-true-value="'A'" ng-false-value="'nope'"/>A
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-init="model.A='B'" ng-model="model.B" ng-true-value="'B'" ng-false-value="'nope'"/>B
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-init="model.C='C'" ng-model="model.C" ng-true-value="'C'" ng-false-value="'nope'"/>C
</label>
</div>
What I want is to create a function to make these check boxes check and uncheck when I check a seperate check box, link or a button. Can some one help me?

Its simple as below,
create a link to toggle the checkboxes check status, Here i have created three links
first one is for toggle the checkbox status, second one for uncheck all the checkboxes and last one for check all the checboxes.
toggle check | uncheck all | check all
click on uncheck will be handle like below,
$scope.uncheckAll = function() {
$scope.model.A = false;
$scope.model.B = false;
$scope.model.C = false;
};
assign a value which result in uncheck of the checkboxes.
click on check all will be handle like below,
$scope.checkAll = function() {
$scope.model.A = 'A';
$scope.model.B = 'B';
$scope.model.C = 'C';
};
Assign the initial values that result in check status of the checkboxes.
Toggle check like below, if A unchecked then all gonna uncheck other vice all are gonna check.
$scope.toggleCheck = function() {
if ($scope.model.A == false) {
$scope.checkAll();
} else {
$scope.uncheckAll();
}
};
here is a DEMO

//on button click
var key;
for(key in $scope.model){
if(//checked condition){
$scope.model[key] = key;
}else{
$scope.model[key] = 'nope';
}
}

how to call a javascript function on radio button's 'checked' property?

I have N number of radio button groups in the page with auto generated names.
I want to call a javascript function as the value of the checked property. THIS LINE EXCLUDED AFTER EDIT ( Depending on the return value, the radio button needs to be checked or unchecked.)
<input type="radio" name="auto_generated_name" value="some_value" checked="test_check(args);" />
and the javascript function is
function test_check(params) {
if(conditions){
return true;
}
else
return false;
}
But that does not work. Whatever value I assign to 'checked' property, be it any javascript function or any string etc, the radio button becomes checked.
How can I achieve my goal?
EDIT:
<input type="radio" name="auto_generated_name" value="somevalue" onclick="test_check(args)"/>
4 radio buttons make a group. such N radio groups have html class names in this way : button_group_1, button_group_2, button_group_3, button_group_4 etc.
The 'args' need to be these class (i.e. radio button group) names and the corresponding values (from value="1", value="2", value="3" and value="4" ).
Cookies with the class names and values will be created inside the javascript function.
On page refresh, cookies matching with the class names will be checked and depending on the existence of the corresponding cookies, the radio button will be checked or unchecked.
How to achieve the goals/

Assuming you are using jQuery, use the change event: http://api.jquery.com/change/

The checked attribute is simply a boolean value to indicate whether the radio button should be checked, it cannot contain script, or a reference to a scripting function. Any value in the attribute will cause the radio button to be checked.
Without knowing what mechanism you are using to check each radio button - I can see an args variable but don't know what type this is - it's going to be tricky to write some code for you.
If you can make args into an array of values, then something along the lines of the following should work for you:
var args = new Array(true,false,true)
$.each(args, function(index, value) {
$("INPUT[type=radio]").eq(index).attr("checked", value)
});
Here's a fiddle to show what I mean more clearly

check this output, valid args is 'aa'.
http://jsfiddle.net/X7rcC/1
html:
<input type="radio" name="auto_generated_name" value="some_value1" checked="bb" />
js:
$(function() {
var radios = $("input[type='radio']");
$.each(radios, function(index, value){
var args = value.attributes[1].nodeValue;
test_check(args, value);
})
});
function test_check(params, value){
if(params == "aa"){
$(value).attr("checked",true);
}else
$(value).attr("checked",false);
}

try this:
Here I user a custom attribute to input named groupname. In OP's case groupname="<?php echo $radio_button_group_name; ?>". Then checking the value of this attribute OP can assign checked attribute value.
<input type="radio" name="r1" groupname="gr1"/>
<input type="radio" name="r2" groupname="gr2"/>
$('input:radio').each(function() {
if ($(this).attr('groupname') == 'gr1') {
$(this).attr('checked', true);
} else {
$(this).attr('checked', false);
}
});

Your question really boils down to:
How can I set the value of a checkbox when the page first loads? (Using a parameter stored with the checkbox)
The key insights are:
you can't store a function inside a parameter and expect it to automatically evaluate on load
you can store the data about an object inside data- properties
you can set the value of objects on page load in jQuery using the $(document).ready() event
.
<script type="text/javascript">
$(document).ready( function() { // this code runs when the page is first loaded
var radios = $("input[type='radio']"); // find all of your radio buttons
$.each(radios, function(){
var radio = $(this);
var param = radio.attr('data-param'); // retrieve the param from the object
radio.attr('checked', test_check(param) ); // set the value of the radio button
})
});
function test_check(params) {
if(conditions){
return 'checked';
}
else
return '';
}
</script>

You cannot use a checked attribute this way, because anything as the value will be the same as checked=true Even just checked checks a radio button. What you should do is use a custom attribute which will create the checked attribute:
<input type="radio" name="auto_generated_name" value="some_value" needs_check="param">
<script>
// Do test_check on param for each input
$('input:radio').each(function()
{
var radio = $(this);
var param = radio.attr('needs_check');
var condition = test_check(param);
radio.attr('checked', condition);
});
function test_check(param)
{
return true or false based on param
}
</script>

I was facing same problem and my conclusion is that don't use " " to contain a function.
Correct:
<input type="radio" name="im" id="b1" onclick=alert("hello"); />
Incorrect:
<input type="radio" name="im" id="b1" onclick="alert("hello");" />