Develop Reference

How to select and click all html checkboxes?

I desire to select and click all checkboxes in a webpage. I've tried:
document.querySelectorAll('button[role="checkbox"]').forEach((e)=>{
e.click();
});
Also:
document.querySelectorAll('[aria-checked="false"]').forEach((e)=>{
e.click();
});
Nothing happens, and devtool console outputs "undefined".
To reproduce you need to have an hotmail email account with messages already deleted.
In hotmail.com go to "Deleted items", there to "recover deleted items", and then a window will be opened with deleted conversations. Near to each conversation there will be a checkbox.

You're on the right track, but missing a few details. First, the query selector functions work. Finding elements is their bread and butter. If you're getting undefined, then your selector string is not correct. Does your HTML implement check boxes with <input type="checkbox">?
Second, don't use .click(). That may work, but is more work and cognitive effort for the followup/maintenance programmer. It additionally might trigger click events (unless of course you'd like that too). Just set the checked attribute:
document.querySelectorAll('input[type="checkbox"]').forEach( (e) => e.setAttribute('checked', '') );

If your checkboxes are inputs you can use...
$('input:checkbox').prop('checked',true);
... or...
$('input[type="checkbox"]').prop('checked',true);

maybe instead of simulate click, try to manually set aria-checked attribute :
document.querySelectorAll('[role="checkbox"]').forEach((e)=>{
//e.click();
e.setAttribute("aria-checked", "true")
});
see here : jsFiddle

try following code
$("input[type='checkbox']").change(function(){
console.log($(this).attr("id")+" changed");
});
$(document).ready(function(){
$("input[type='checkbox']").prop("checked",true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chkbox1" checked="checked"/>
<input type="checkbox" id="chkbox2"/>
<input type="checkbox" id="chkbox3"/>

On checking "Mr." radio button it should select "Male" radio button. Please tell me what went wrong? Its not selecting Male radio button [duplicate]

With HTML a checkbox is created like this:
<form>
<input type="checkbox" id="category1">Category1<br>
</form>
With javascript we can check the checkbox like this:
$("#category1")[0].checked = true
Now I am trying to create the same page with jquery-mobile. The checkbox looks like this:
<form>
<label>
<input name="checkbox-0 " type="checkbox">Check me
</label>
</form>
Why is there is no id here? Is the name the id? Should I delete the attribute name and create one with the name id?
How can I check this checkbox here with Javascript/jQuery?
I tried the code above, but it doesn't seem to work for this checkbox.

You need to refresh it after changing its' .prop, using .checkboxradio('refresh'). This is the correct way to check checkbox/radio in jQuery Mobile.
Demo
$('.selector').prop('checked', true).checkboxradio('refresh');
Reference: jQuery Mobile API

You can do:
$('input[name="checkbox-0"]').prop("checked", true).checkboxradio('refresh'); //sets the checkbox
var isChecked = $('input[name="checkbox-0"]').prop("checked"); //gets the status

Straight from the jQ Mobile docs:
$("input[type='checkbox']").attr("checked",true);

With the solution from #Omar I get the error:
Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'
I actually had a flipswitch checkbox:
<div class="some-checkbox-area">
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-lesson-complete"
data-on-text="Complete" data-off-text="Incomplete" data-wrapper-class="custom-size-flipswitch">
</div>
and found the solution was:
$("div.ui-page-active div.some-checkbox-area div.ui-flipswitch input[type=checkbox]").attr("checked", true).flipswitch( "refresh" )
Notes
I don't usually specify ids for page content as jQuery Mobile loads multiple div.ui-page content into a single HTML page for performance. I therefore never really understood how I could use id if it might then occur more than once in the HTML body (maybe someone can clarify this).
If I use prop rather than attr the switch goes into an infinite flipping loop! I didn't investigate further...

Checkbox .onClick not working in firefox

I'm trying to write code to make a text box appear and disappear based on whether or not a checkbox is checked, but while it works exactly the way I want it to in chrome, .onclick and .onchange seem to do nothing in firefox.
Trigger code:
document.getElementById('Other').onclick = ChangeOtherState;
'Other' html code:
<p>
<label for="Other">Other</label>
<input type="checkbox" id="Other" class="Types[]" value="Other"/>
<textarea id="OtherText" name="Other">Please enter other types here</textarea>
</p>
State change function:
function ChangeOtherState() {
var otherCB = document.getElementById("Other");
var otherTB = document.getElementById('OtherText');
if (otherCB.checked) {
otherTB.style.display='block';
otherTB.removeAttribute('disabled');
} else {
otherTB.style.display='none';
otherTB.setAttribute('disabled','disabled');
};
}
Is there a way to make .onclick/onchange work? if not what can I use to get the same functionality without jQuery?
EDIT: For future readers, try to change the position of the trigger declaration to right after initialization.

Please find here others topics talking about the issue.
select onclick onchange not working
onchange / onclick in a checkbox doesn't work in IE
OnClick Dropdown works in FireFox but not Chrome or IE?
It seems to have workaround already discussed.
Regards,

Bootstrap: how to check if an elment is checked and set it to disable if checked

This code works great but is missing something I need.
Basically if the input has a checked="checked" attribute, it should keep the other two elements disabled. if it is not checked the elements are enabled.
Here's my code on jsFiddle: http://jsfiddle.net/arunpjohny/gMgm7/1/
And this would be my input
<input class="test_priv1" type="checkbox" name="custom" id="custom" checked="checked" onclick="" />
I guess this would be translated to:
If my input gets a check, disable the other two elements. If my input has the checked="checked" then keep my other two elements disabled. If my input is unchecked enable the two elements.

Got it working:
$(document).ready(function() {
if ($('.test_priv1').is(':checked')){
$('.test_priv2, .test_priv3').prop('disabled',true);
}
$('.test_priv1').change(function () {
if(this.checked){
$('.test_priv2, .test_priv3').prop('disabled',true);
}else{
$('.test_priv2, .test_priv3').removeAttr('disabled');
}
});
});
Here's a demo

#Dan had it right with checking on ready, but for some reason running .checked off the element does not seem to work. However, if you use $('.test_priv1').is(':checked') then it seems to work properly. See this fiddle for an example of it working on both page load and on change.

jQuery recognising incorrect state of radio buttons on page load when radio value="No" and neither radio is selected

I have radio buttons on a page which add or remove a css class from other elements according to their state.
The class testclass is added to the element slave by default (i.e. the HTML the page loads is:
<input type="radio" value="No" name="master" /> No
<input type="radio" value="Yes" name="master" /> Yes
<input type="text" name="a" id="slave" class="testclass" />
The following jQuery removes the class if the "No" radio is selected
$("input[name$='master']").change(function(){
if(this.value === 'No') {
$('#slave').removeClass('testclass');
} else {
$('#slave').addClass('testclass');
}
}); $("input[name$='master']").filter(':checked').change()
This works fine in terms of moving back and forward between the states once the page has loaded, but I am triggering the function on page load and it removes the class at that time, when no check radio is selected. (It's fine if "Yes" is loaded as checked).
Interestingly it is also fine if I reverse the condition such that "Yes" is required to remove the class (page loads with class still there).
I thought javascript might be equating no selection made with a value of "No" hence I tried the strict equality, but no difference.
Any ideas?

I have developed a fiddle for you to consider. Here is the link to it => http://jsfiddle.net/6c7F2/
I think the best way to answer this question is to make you understand a few things about the code you have provided here. I am going to write in comments to it.
$( document ).ready(function(){ // this function is called once your page loads
$("input[name$='master']").change(function(){
//this function is not called until you click the radio buttons.
// Be careful to note that this function is never called on page load.
// You can test it in the fiddle I created
if(this.value === 'No') {
$('#slave').removeClass('testclass');
// this alert in the fiddle is called only
// when you click the radio buttons. Not on page load
alert("It entered");
} else {
$('#slave').addClass('testclass');
}
});
$("input[name$='master']").filter(':checked').change()
});
So make sure that the things and checks you want to execute on page load should be outside the scope of $("input[name$='master']").change(function(){});
This is only triggered when you click on radio buttons and not on page load.

It is happening because you have not selected any value on page load and still you are triggering the event.
Try:
Select any checkbox by default.
<input type="radio" value="No" name="radios" checked="checked"/> No
OR
Remove this line
$("input[name$='master']").filter(':checked').change()