Check if all checkboxes are checked on submit [duplicate] - javascript

This question already has answers here:
Check if checkbox is checked with jQuery
(26 answers)
Closed 8 years ago.
I have this:
<fieldset id="booom">
<label><INPUT TYPE="checkbox" NAME="a" VALUE="a">something></label>
<label><INPUT TYPE="checkbox" NAME="b" VALUE="b">something></label>
<label><INPUT TYPE="checkbox" NAME="c" VALUE="c">something></label>
</fieldset>
<input type="button" id="answer" value="submit">
How can I check with jQuery if all checkboxes from fieldset 'booom' are unchecked on submit?
So:
if (all checkboxes from parent 'booom' are unchecked) {
alert("something")
}
I found many posts about this but none with an actual simple working sample with a button and an alert box :)
Thanks!

You can use the :checked modifier in a selector.
if ($("#boom :checkbox:checked").length == 0) {
alert("You have to check at least one box");
}

Related

Getting the value of a checked radio button using javascript [duplicate]

This question already has answers here:
How to get the selected radio button’s value?
(19 answers)
Closed 5 years ago.
I am trying to access the value of a checked radio button in my form using JavaScript only, no jQuery. I have looked this up and seen many answers but when I copy the same code into my project it doesn't work for some reason. Here is my code.
<form>
<input type="radio" name="style" value="3" checked>
<input type="radio" name="style" value="5">
<input type="radio" name="style" value="10">
</form>
I tried to access the value using this JavaScript code:
var value = document.querySelector('input[name="style"]:checked').value;
console.log(value);
I would assume this would give me the string of 3 as the logged value. When I try this example I get the following error:
request.js:1 Uncaught TypeError: Cannot read property 'value' of null
at request.js:1
I also tried using a for loop of an array of the inputs named style and that didn't work either. It found all three inputs but didn't have values for them in the array. Can someone please explain what is wrong? And if this is obvious please be patient I am still learning I am just trying to get better.
Your code is correct, you only need is an event to run the selector code to get the value of selected value. See below code :- you can also use javascript selector for click event instead of function placement in onclick event handler.
function run_test(){
var radio_ele = document.querySelector('input[name="style"]:checked');
console.log(radio_ele.value);
}
<form>
<input type="radio" name="style" value="3">
<input type="radio" name="style" value="5">
<input type="radio" name="style" value="10">
<button type="button" onclick="run_test()">click</button>
</form>
function getValue() {
var value = document.querySelector('input[name="style"]:checked').value;
console.log(value);
}
<form>
<input type="radio" name="style" value="3" checked>
<input type="radio" name="style" value="5">
<input type="radio" name="style" value="10">
<button type="button" onclick="getValue()">click</button>
</form>
you code is working fine, except you need event to get latest value after load

Checkbox with ajax issue for select or unselect issue [duplicate]

This question already has answers here:
jquery attr('checked','checked') works only once
(2 answers)
Closed 6 years ago.
I have checkbox code in html below format
<label class="checkbox-inline">
<input type="checkbox" name="category[]" value="1" data-id="1" class="categorychk" checked="checked">Men
</label>
<label class="checkbox-inline">
<input type="checkbox" name="category[]" value="2" data-id="2" class="categorychk" checked="checked">Women
</label>
On ajax success response I doing following jquery code it will work fine.
$.each(data, function(index,value) {
$(".categorychk[data-id="+value+"]").attr("checked",true);
});
But issue is before call I clear all checked marks and then apply above code. But it does not work.
When I add following code after ajax call
$(".categorychk").each(function(){
$(this).removeAttr("checked");
});
Note : If apply above code without clear checked marks then working fine with the previous checked checkbox.
Ok. You're trying to do stuff with attributes, when you should be using properties. Read http://api.jquery.com/attr/, specifically the section entitled "attributes vs properties".
In the meantime, your code will work if you change
$(".categorychk").each(function(){
$(this).removeAttr("checked");
});
to
$(".categorychk").prop("checked", false);
(N.B. you don't need to .each() this, it will operate on all the selected items automatically).
and change
$(".categorychk[data-id="+value+"]").attr("checked",true);
to
$(".categorychk[data-id="+value+"]").prop("checked",true);
Note the use of .prop() instead of .attr()
As documented in how do i check uncheck a checkbox input or radio button you need to use jQuery prop:
$(".categorychk[data-id="+value+"]").prop('checked', true);
And to filter elements by data-id you can use:
$(".categorychk").filter(function() {
return $(this).data('id') == value;
});

Checkbox in <a href> tag [duplicate]

This question already has answers here:
Check/Uncheck checkbox with JavaScript
(12 answers)
Closed 7 years ago.
This is my HTML code:
<a id="id_1" name="n_1" href="#" onclick="callFn(this.id);">
<input type="checkbox" name="ck_1" id="xyz">
Click Here
</a>
I want to check this checkbox using Javascript code. How to do it??
Use <label> instead of <a>.
<label id="id_1" onclick="callFn(this.id);">
<input type="checkbox" name="ck_1" id="xyz">
Click Here
</labek>
This is the use of <label> tag. And moreover, you don't need callFn(this.id); at all.
Here is simple DEMO.. hope it helps
$("#check").click(function() {
var checkBoxes = $("#xyz");
checkBoxes.attr("checked", !checkBoxes.attr("checked"));
});
<label id="id_1" onclick="callFn(this.id);" for="xyz">
<input type="checkbox" name="ck_1" id="xyz">
Click Here
</labek>
<br/>
<button id="check">By button</button>
Get the element using its ID:document.getElementById("xyz")
Then change its property checked to true:
document.getElementById("xyz").checked = true;

How to Clear checkbox When checked other checbox ? using java script [duplicate]

This question already has answers here:
How to clear all checkbox When checkbox id="checkAll" are checked?
(4 answers)
Closed 8 years ago.
How to Clear checkbox When checked other checbox ? using java script
When user checked checkbox id="checkItem1" or id="checkItem2" or id="checkItem3" i want to clear checkbox id="checkAll" How can i do that ? using java script
<input type="checkbox" id="checkAll" checked > Check All
<hr />
<input type="checkbox" id="checkItem1"> Item 1
<input type="checkbox" id="checkItem2"> Item 2
<input type="checkbox" id="checkItem3"> Item 3
http://jsfiddle.net/peap/sydzL8Lc/8/
Using jQuery, you can just write:
$("#checkItem1").click(function() {
$("#checkAll").prop('checked', false);
});
and repeat that for checkItem2 and checkItem3. But I recommend to add a class to all checkItems, that would make it easier to select them.

Group checkboxes in JSFiddle : Part 1 [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am trying to do group checkboxes by selecting selectAll. Please check JSFiddle for code sample
JSFiddle
<fieldset>
<!-- these will be affected by check all -->
<div><input type="checkbox" ID="checkall1" onclick="CheckAllClick('checkall1');"> Check all</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
<!-- these won't be affected by check all; different field set -->
<div><input type="checkbox" ID="checkall2" onclick="CheckAllClick('checkall2');"> Check all</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
function CheckAllClick(id){
alert(id);
$(id).closest('fieldset').find(':checkbox').prop('checked', this.checked);
}
Part 2: Continue
You have some issues in your function: Try this way:
Js
function CheckAllClick(elem) {
$(elem).closest('fieldset').find(':checkbox').prop('checked', elem.checked);
}
Markup
<input type="checkbox" ID="checkall1" onclick="CheckAllClick(this);">Check all</div>
Fiddle
Pass the element in the onclick function as this and access it in your code.
If you can go with jquery approach then:
Add a class to your checkall check boxes
<input type="checkbox" class="checkAll" ID="checkall1" >Check all
With the same code, if you want to make the label click to check the checkbox then just wrap them in label tag, same thing you can do with all the checkboxes by wrapping them in label which generally is a standard way:
<label><input type="checkbox" class="checkAll" ID="checkall1" >Check all<label>
Bind an event handler to a class
$('.checkAll').on('change', function(){
$(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
})
Fiddle
function CheckAllClick(id){
alert(id);
$(id).closest('fieldset').find(':checkbox').prop('checked', 'checked');
}
The simplest solution is just to changed the checked property to checked seeing as you only selecting inputs you want already
And pass this into your onclick
<div><input type="checkbox" ID="checkall2" onclick="CheckAllClick(this);"> Check all</div>
What you probably want is this.
$('[id^=checkall]').click(function(){
$(this).closest('fieldset').find(':checkbox').not(this).prop('checked', function(i,oldval){
return !oldval;
});
});
Fiddle

Categories