Count how many checkbox have been checked - javascript

I am using the following code to check how many checkbox user has checked.
var empty_watch = $('#clocks').find('input.checkbox:checked').length;
This is used in form validation: if empty_watch is 0 then do not post form: user must choose at least one item (and there is not a default one).
HTML is the following:
<div id="clocks" class="sez-form">
<fieldset>
<legend> Orologi inclusi </legend>
<div class="percheckbox">
<input class="clock" type="checkbox" value="1" name="orologio">Browser
</div>
<div class="percheckbox">
<input class="clock" type="checkbox" value="2" name="orologio">Prototipo1
</div>
<div class="percheckbox">
<input class="clock" type="checkbox" value="3" name="orologio">test FP
</div>
<br style="clear: both;">
</fieldset>
</div>
Even if I check all the checkboxes empty_watch is still 0. What am I doing wrong?

Your find selector:
'input.checkbox:checked'
looks for an input with a class of 'checkbox'. You should be looking at the 'type' attribute of the element.
Instead try:
'input[type="checkbox"]:checked'

There is a specific :checkbox pseudo selector. It does the same as input[type=checkbox]:
var empty_watch = $('#clocks').find(':checkbox:checked').length;
As you already target #clock then find, this will be pretty good speed-wise too.
You could reduce it slightly, to the following, if you know there are no other checkable inputs:
var empty_watch = $('#clocks').find(':checked').length;

Related

Checked a checkbox based on another checkbox if checked

I have some checkboxes generating through a foreach loop. All I want, by checking one checkbox another checkbox will be checked. I have already tried something like this,
This is the foreach block where the checkboxes are generating.
#foreach($testItems->where('category_id', $category->id) as $item)
<div class="col-md-12">
<div class='form-check'>
<div class="custom-control custom-checkbox">
<input type="checkbox"class="select-test form-check-input form-check-secondary" id="selectTest" name="test_name" value="{{$item->test_name}}">
</div>
<input type="checkbox" class="price" id="testPrice" name="test_price" value="{{$item->price}}" >
<span>{{ucwords($item->test_name)}} ( {{$item->price}} )</span>
</div>
</div>
#endforeach
This is the script I tried
var chk1 = $("#selectTest");
var chk2 = $("#testPrice");
chk1.on('change', function(){
chk2.prop('checked',this.checked);
});
in this case, the first checkbox only works fine, but rest of them are not working.
It only works for the first checkbox only because id= attributes only match the first matching node in the DOM. Use a class (.selectTest) instead.
You may need to get rid of id="testPrice" as well or make it a class instead.
#foreach($testItems->where('category_id', $category->id) as $item)
<div class="col-md-12">
<div class='form-check'>
<div class="custom-control custom-checkbox">
<input type="checkbox"class="select-test form-check-input form-check-secondary selectTest" name="test_name" value="{{$item->test_name}}">
</div>
<input type="checkbox" class="price" name="test_price" value="{{$item->price}}" >
<span>{{ucwords($item->test_name)}} ( {{$item->price}} )</span>
</div>
</div>
#endforeach
The jquery script.
var chk1 = $(".selectTest");
chk1.on('change', function(){
$(this).closest("div").next().prop('checked', $(this).is(":checked"));
});
id attribute
The id global attribute defines an identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).

Select more checkbox by value on different div

I asked how to select more checkbox by value, and it works well.
See here the question: Select more checkbox by value or id
But now I would like to know if you can select these checkboxes if I have 2 divverenti div, here is an example:
<div class="checkbox_option1">
<div class="icheckbox" style="position: relative;">
<input class="checkbox_filter" type="checkbox" id="ffQHb" value="Italy">
<input class="checkbox_filter" type="checkbox" id="ffQrt" value="Germany">
<input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
</div>
</div>
<div class="checkbox_option2">
<div class="icheckbox" style="position: relative;">
<input class="checkbox_filter" type="checkbox" id="ffQHb" value="Italy">
<input class="checkbox_filter" type="checkbox" id="ffQrt" value="Germany">
<input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
<input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
</div>
</div>
I would like that the toggle select only those of the <div class="checkbox_option2"> it's possible? Many Thanks
Check out jQuery child selectors, I think it will be of use: https://api.jquery.com/child-selector/
Building off the solution to your prior question, you would use something along these lines:
var check_germany = $(".checkbox_option2 > input:checkbox[value=Germany]");
Yes use parent-child selectors (using >) if they're direct children like:
$("div.checkbox_option2 > input:checkbox[value=Germany]")...
Or just a space () if they're children or children of children ...etc like:
$("div.checkbox_option2 input:checkbox[value=Germany]")...
In your case the second one will work.
More about CSS selectors here.

Javascript check bootstrap checkbox by id

I have the following form :
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox">
<label>
<input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' > Show only price-discounted products
</label>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox" id='check21'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
</div>
</div>
</form>
I'd like to be able to check the second checkbox automatically with JavaScript once I check the first one. I tried using the following script :
<script>
function handleChange(cb) {
if(cb.checked == true) {
alert('Message 1');
document.getElementById("check21").checked = true;
} else {
alert('Message 2');
var x = document.getElementById("check21").disabled= false;
}
}
</script>
But it doesn't work since I think with bootstrap is a question of classes.
The problem as Didier pointed out is that you have two elements with the same ID:
<div class="checkbox" id='check21'>
and
<input type="checkbox" name="discounting" onchange='' id='check21'>
The call to document.getElementById('check21') will probably (because the behavior is undefined) return the first one, which in this case is the <div> element, not the checkbox.
You must not use the same ID on two HTML elements, so you need to change the ID on one or the other of them.
http://jsfiddle.net/uywaxds5/2/
I included boostrap as an external reference.
<div class="checkbox" id='check22'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
Fixing the duplicate id seems to work.
If it does not works, the issue might be in another part of your code.
Use a different name for the second radio button
<input type="checkbox" name="discounting21">
There can only be one selected radio button belonging to the same group(ie. name).

Angularjs input radio and ng-repeat issue

Okay so here is my setup i have the following array:
answers = [answer1, answer2]
with these i do the following:
<form>
<div class="col-xs-12" ng-repeat="answer in component.question.answers">
<div class="col-xs-1" style="width: 1%">
<div class="radio">
<label class="i-checks">
<input type="radio" name="a" ng-model="answer.is_correct">
<i></i>
</label>
</div>
</div>
<div class="col-xs-11">
<input type="text" ng-model="answer.answer" class="form-control" placeholder="Svar">
</div>
</div>
</form>
Now the input[radio] are inside the same form as they should. My goal is that when i set one as selected both of the answer objects should be updated so that only one of the object has the value is_correct = true
However what happens right now is that if i click the first and then second both values have is_correct = true
So what can i do?
Radio buttons are used to choose between different values for a single field or, in Angular's case, a single model. The logical solution would be to select the correct answer:
<input type="radio" ng-model="component.question.correctAnswer" ng-value="answer">
If you really need to set a flag you can easily achieve that with a watcher:
$scope.$watch('component.question.correctAnswer', function(correctAnswer) {
component.question.answers.forEach(function(answer) {
answer.is_correct = answer === correctAnswer ? true : false;
});
});

add onto checked values in checkbox via jquery

Hi Im trying to add onto a checkbox's values selected, so maintain the selected values but add other selected values. however the attribute doesn't add selected values. here is my attempt (p.s how would I in turn remove values selected and keep existing values selected?) thanks
$('.add_button').click(function() {
var values = $('input:checkbox:checked.ssremployeeids').map(function () {
return this.value;
}).get();
$('.ssremployeeid').attr('selected',values);
<div class="grs-multi-select-area" style="height:120px;width:150px;">
<div class="grs-multi-select-box ">
<input id="ssrBox" class="ssremployeeid" type="checkbox" name="ssremployeeid[]"
value="1312">
Amanda Becker
</div>
<div class="grs-multi-select-box "> // same as above I just collapsed it for viewing purposes
<div class="grs-multi-select-box ">
<div class="grs-multi-select-box ">
</div> //closes main div
});
I am still not sure if I understood you question correctly, but based one what I understood here's something you could try:
Sample Fiddle: http://jsfiddle.net/HFULf/1/
HTML
<div id="div1">
<input type="checkbox" name="cb1" value="val1" checked="checked" />
<input type="checkbox" name="cb2" value="val2"/>
<input type="checkbox" name="cb3" value="val3"/>
</div>
<div id="div2">
<input type="checkbox" name="cb1" value="val1"/>
<input type="checkbox" name="cb2" value="val2"/>
<input type="checkbox" name="cb3" value="val3"/>
</div>
<button id="btn1">Add Selected</button>
<button id="btn2">Remove Selected</button>
jQuery
//add selected values from first set of check-boxes to the second set
$('#btn1').click(function(e){
$('div#div1 input[type="checkbox"]:checked').each(function(){
$('div#div2 input[type="checkbox"]').eq($(this).index()).prop('checked',true);
});
});
//remove values from second set of check-boxes if selected in first one
$('#btn2').click(function(e){
$('div#div1 input[type="checkbox"]:checked').each(function(){
$('div#div2 input[type="checkbox"]').eq($(this).index()).prop('checked',false);
});
});
Hope, this will help you a little if not solve your problem entirely.

Categories