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"/>
Related
I know this is a common question and I understand why it isn't working. Problem is that the suggested answers are not working for me.
HTML code:
<label class="radio"><img id="boyImg" class="radio-img btn-boy" src="/wp-content/uploads/2016/09/boy.png"><input type="radio" name="Gender" value="Boy"></label>
<label class="radio"><img id="girlImg" class="radio-img btn-girl" src="/wp-content/uploads/2016/09/girl.png"><input type="radio" name="Gender" value="Girl"></label>
I have the following code:
$('input[type=radio]').on('change', function() {
$(this).closest("form").submit();
});
Which is working as expected the first time. Problem is that when I navigate back to the page with the radio button. It only works if I select a different radio buttons - selecting the same isn't working. Despite none of them are selected, when coming back to the page. In other words, I can't select e.g. Boy twice in a row, despite having navigate to another page in between my selections.
I've tried the following fix:
$('input[type=radio]').on('change', function() {
if($('input[value="Boy"]').is(':checked') || $('input[value="Girl"]').is(':checked')){
$(this).closest("form").submit();
}
});
But it still only works if I select a different checkbox than my original choice.
What am I doing wrong?
As a workaround, you can use click event. It has something to do probably with browser autocomplete. Try different browser.
That's an odd browser quirk that the selected radio button is stored but not displayed as selected. Simplest workaround for your purposes would be adding click.
$('input[type=radio]').on('change,click', function() {
$(this).closest("form").submit();
});
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...
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.
I have the following JS code:
else if ($('#tos').is(':not(:checked)')){
alert("Error");
}
And the tos element:
<input type="checkbox" name="tos" value"1">
When I click my submit button, without checking it, the error doesn't pop up. Any reason why?
Your selector $('#tos') looks for an element with id tos which your checkbox does not have. You can either add the id attribute to the input element or use the name attribute to find the element
else if (!$('input[name="tos-pp"]').is(':checked')){
Your jQuery selector is not returning anything because the checkbox doesn't have an id of tos. Also, the correct syntax for checking if a checkbox/other input is checked is as follows:
else if (!$('input:checkbox').is(':checked')){
alert("error");
}
I composed a fiddle for your reference. Please see the code, it may help you out.
How do you create an HTML checkbox that is unclickable, but not greyed out? I used the disabled=disabled tag, but that makes it greyed out (in Chrome). Otherwise it works well. Working in jQuery and Rails...
Thanks.
Usability concerns aside:
$("input:checkbox").click(function() { return false; });
For example: http://jsfiddle.net/nKwRj/
Use jQuery.on with false as the callback:
$(":checkbox").on("click", false);
Fiddle
I had the same issue where i wanted the user to check the box but not the client the client was supposed to see the checked box only and not to make changes so
in html just add a css pointer event style
<input name='test' type='checkbox' style="pointer-events: none;"/>
Prevent checkboxes from being changed by ID or by Class.
/* by class */
$(".nochange").click(function () {
return false;
});
/* by ID */
$("#nochange").click(function () {
return false;
});
<input name='test' type='checkbox' class='nochange' checked='checked' />
<br />
<input name='test' type='checkbox' id='nochange' checked='checked' />
http://jsfiddle.net/mjames757/nX64E/1/
Why do you want to make a unclickable checkbox appear to be clickable? To fool the users?
If you really want to fool the users, you could place a div with 0.01 opacity above it using absolute positioning (no script required). But I still wonder why you feel the need to do this prank on your users... ;)
EDIT: If what you really need is to include a value the user should not change but you don't want what you probably are considering "an ugly disabled checkbox", you should use input type hidden, which is completely invisible.
If you want to indicate that something is preselected but not changeable or something like that, use a disabled checkbox to indicate this (or an image of a pretty checkbox if you like), but beware that the value of a disabled checkbox is not submitted. Use a hidden field to include the the data needed.
Just add onclick="return false" in your HTML code.
Example:
<input type="checkbox" onclick="return false" class="checkbox" checked >
I ran into this post in search of an answer to the initial question - and found the opposals to non-grayed disabled checkboxes convincing, so instead i made a td-tag containing this: <%if rs("yes/no value") = -1 then response.write("√")%> (wing is a &radic). Then i get a clean info wing not inviting to click.