My MSCRM 2015 online solution uses a 3rd party tool to build a checkbox list from N:N dynamically and this is then published in another Iframe, I was wandering if I could use jQuery to test if any of these checkboxes are checked in JavaScript
Problem though if you look at the html these inputs don't have id's or names I can use to reference them with something like ...
var checkboxValues = [];
$('input[name=checboxset_ava_incident_ava_affectedcountry]:checked').map(function() {
checkboxValues.push($(this).val());
Here is an example of how the html get build:
hope the sizing is ok to read But what I want you to see is the <input> tag's properties:
<input type="checkbox" data-bind="id: Id, checked: Value, title: Name, enable: $parent.GetIsEnabled()">
If you want to find selected checkboxes, radio buttons or select elements, look at the jQuery :checked selector, as in
$(':checked')...
If you want checkboxes, use the type attribute in your selector, as in
$('input[type=checkbox]')...
or combine them, to find only checked checkboxes (i.e., to ensure that you don't pick up any radio buttons or select elements):
$('input[type=checkbox]:checked')...
DEMO
var findChecked = function() {
var checked_values = [];
var $checkedBoxes = $('input[type=checkbox]:checked');
console.log('$checkedBoxes', $checkedBoxes.length);
$checkedBoxes.each(function(i, e) {
checked_values.push($(e).val());
});
alert(checked_values);
};
$('button').click(findChecked);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked value="1" /> 1</label>
<label><input type="checkbox" value="2" /> 2</label>
<label><input type="checkbox" value="3" /> 3</label>
<button>See checked</button>
Related
I have several sets of checkboxes on a webpage. I want to uncheck them all with javascript. Right now, I do it by looking for the names of each set and unchecking them with FOR loops like this...
for (i=0;i<document.getElementsByName("myboxes").length;i++) {
document.getElementsByName("myboxes")[i].checked=false;}
for (i=0;i<document.getElementsByName("moreboxes").length;i++) {
document.getElementsByName("moreboxes")[i].checked=false;}
for (i=0;i<document.getElementsByName("evenmoreboxes").length;i++) {
document.getElementsByName("evenmoreboxes")[i].checked=false;}
I'm looking for a way to target them all with one loop. I could do getElementsByTagName('input') to target all INPUTS, but that's a problem because I have some radio inputs that I don't want to uncheck. Is there a way to target all checkbox inputs?
Thanks for the suggestions. I just thought of something. Each NAME I use has the word "boxes" in it, myboxes, moreboxes, evenmoreboxes. Is there a way to target the word "boxes" in in the name, like a wildcard, something like document.getElementsByName("*boxes") that way if I add a set of checkboxes at some point that I don't want to uncheck I can simply name them differently.
You can select all checked checkboxes and reset their state:
function uncheckAll() {
document.querySelectorAll('input[name$="boxes"]:checked')
.forEach(checkbox => checkbox.checked = false);
}
<input type="checkbox"/>
<input type="checkbox" name="a_boxes" checked/>
<input type="checkbox"/>
<input type="checkbox" name="b_boxes" checked/>
<input type="checkbox" name="c_boxes" checked/>
<button onclick="uncheckAll()">Reset</button>
you can use document.querySelectorAll('input[type="checkbox"]'); to get a list of them all. then run your loop
My proposal is:
document.querySelectorAll("[name=myboxes], [name=moreboxes], [name=evenmoreboxes]").forEach((e) => echecked=false);
document.querySelectorAll("[name=myboxes], [name=moreboxes], [name=evenmoreboxes]").forEach((e) => e.checked=false);
<input type="checkbox" name="myboxes" value="1" checked>1<br>
<input type="checkbox" name="moreboxes" value="2" checked>2<br>
<input type="checkbox" name="evenmoreboxes" value="3" checked>3<br>
As suggested by #imjared, you can use querySelectorAll, but you will have to iterate over it:
querySelectorAll('input[type="checkbox"]').forEach(c => c.checked = false);
Here is the doc for querySelectorAll
I am currently using Javascript to try attempt this, could it be the way I am linking the checkbox to the script? If so any advice would be helpful. Edit- The checkboxes are within a foreach loop and radio boxes will not work as this is not the exact situation I am using this in.
Checkboxes
#Html.CheckBoxFor(modelItem => item.ambassador, htmlAttributes: new { #class = "checkbox", type = "checkbox" })
#Html.CheckBoxFor(modelItem => item.groupSelection, htmlAttributes: new { #class = "checkbox", type = "checkbox" })
Javascript
<script>
$('.checkbox').change(function () {
$(this).siblings('.checkbox').prop('disabled', this.checked);
});
</script>
The Javascript code is from this question: Disable Checkbox on selecting another checkbox in mvc4
HTML already has a built-in for this, they're called radio buttons:
<form>
<input type="radio" name="option" value="first">
<label for="first">first</label>
<input type="radio" name="option" value="second">
<label for="second">second</label>
</form>
From EchoEcho:
Radio buttons are used when you want to let the visitor select one - and just one - option from a set of alternatives. If more options are to be allowed at the same time you should use
check boxes instead.
Because you only want the user to be able to select one of the two options at a time, you should use radio buttons.
See also this ux.SE post on the subject.
maybe your checkboxes are being loaded after the script is loaded.. ajax? partial? try adding the listener to your body or a parent element
$(function(){
$('body').on('click', '.checkbox', function () {
$(this).siblings('.checkbox').prop('disabled', this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="checkbox" type="checkbox"></input> check 1<br>
<input class="checkbox" type="checkbox"></input> check 2<br>
<input class="checkbox" type="checkbox"></input> check 3<br>
<input class="checkbox" type="checkbox"></input> check 4<br>
How can I check checkboxes checked property? If any of them is not checked, display this sentence in span: "you shoud select one of them". My validation don't work.
<label>
<input type="checkbox" name="chk[]" id="chk[]" />male
</label>
<label>
<input type="checkbox" name="chk[]" id="chk[]" />female
</label>
<script>
if ($('input[name="chk[]"]:checked').length < 0) {
$("#textspan").html('you shoud select one of them');
}
</script>
As far as your specific question goes, when no checkbox is checked $('input[name="chk[]"]:checked').length is 0, not negative - so you should change the condition from if ($('input[name="chk[]"]:checked').length < 0) to if ($('input[name="chk[]"]:checked').length == 0)
Full example
Other than that, some side notes:
1. I'd use radio buttons (as it is more suitable for your current male / female selection).
2. You have the same ID (chk[]) twice, which renders your HTML invalid.
3. The [] characters in the ID are not permitted in HTML 4.1 standards, and do not suit the convention.
I took the liberty of changing the code a bit, as your HTML is a bit strange.
Working example: http://jsfiddle.net/a4jzvoou/
HTML:
<div>
<input type="checkbox" class='gender' id="male">male</input>
<input type="checkbox" class='gender' id="female">female</input>
</div>
<button class="validate">Validate</button>
JS:
$(function() {
$('.validate').click(function(event) {
var checkedCount = ($('input[class="gender"]:checked').length))
})
});
i have an array of checkbox (to use with php), bu i want to use ajax to make somethings with this values from checkbox, i want to get the value from each checkbox and make an ajax request.
I have this:
$("#checked").each(function(i, val){
var k = $(i).value();
console.log(k);
});
but no success.
html:
<input id="checado" type="checkbox" name="ids[]" value="78">
<input id="checado" type="checkbox" name="ids[]" value="79">
<input id="checado" type="checkbox" name="ids[]" value="80">
<input id="checado" type="checkbox" name="ids[]" value="81">
With a small change to your HTML you can use the following JavaScript (demo):
<input class="checado" type="checkbox" name="ids[]" value="78"> 78<br/>
<input class="checado" type="checkbox" name="ids[]" value="79"> 79<br/>
<input class="checado" type="checkbox" name="ids[]" value="80"> 80<br/>
<input class="checado" type="checkbox" name="ids[]" value="81"> 81<br/>
<button id='Submit'>Submit</button>
<script>
$('#Submit').on('click', function() {
var values = []
$('.checado:checked').each(function () {
var e = $(this);
values.push(e.val());
});
alert(values);
});
</script>
For a more detailed breakdown of what is going on, the check boxes have a checked state and a value. the jQuery Selector $('.checado:checked') will return just the checked check boxes (You should use class when you have multiple elements and id only when you are identifying a single element, browsers and CSS can appear lazy about this but incorrect usage will yield unpredictable results). The other change is to grab the values by the jQuery method .val() which helps hide the input type and browser specific ways values are fetched.
You're using jQuery, which uses it's own .val() method. Replace .value() with .val().
I have multiple groups of checkboxes like these:
<input type="checkbox" class="correction_check" product_id="3" defect_col="Qty">
<input type="checkbox" class="correction_check" product_id="3" defect_col="Exp">
<input type="checkbox" class="correction_check" product_id="3" defect_col="Bat">
<input type="checkbox" class="correction_check" product_id="4" defect_col="Qty">
<input type="checkbox" class="correction_check" product_id="4" defect_col="Bat">
A group of checkboxes is differentiated by product_id.
Can I do something like this?
$('.correction_check').click(function(){
//check if all other check boxes having same product_id as $(this) are checked and do some action
});
You can test if all other checkboxes with same product_id are checked like this :
$('.correction_check').click(function(){
var otherAreChecked = $('.correction_check[product_id='+$(this).attr('product_id')+']')
.not(this).not(':checked').length===0;
// do action
});
The idea is to count the ones that are not checked : this count should be 0.
Demonstration
Note that if you want to know if all check boxes with same product id are checked (not just the "other" ones), you just have to remove .not(this) from my code
Try this:
$(".correction_check").change(function(){
var id = $(this).attr("product_id");
$(".correction_check[product_id='"+id+"']:checked").each(function(){
//do action
});
});