checkbox default checked is not working!
I tried to fix it, but I can not find where is the error here?
so on page load that is checked, after page loadet that is unchecked!?
I tried that
<div class="onoffswitch" style="margin: 0 auto;">
<input type="checkbox" class="avacheckbox onoffswitch-checkbox" id="AvButtonAutoGames" checked="checked"/>
<label class="onoffswitch-label" for="AvButtonAutoGames">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
and that
<div class="onoffswitch" style="margin: 0 auto;">
<input type="checkbox" class="avacheckbox onoffswitch-checkbox" id="AvButtonAutoGames" checked/>
<label class="onoffswitch-label" for="AvButtonAutoGames">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
To specify the value, use the checked="true", otherwise do not specify the property.
Checked: <input type="checkbox" checked="true" /><br/>
Not checked: <input type="checkbox" />
It's hard to see, but you're using this syntax to define the checkbox value?
document.getElementById('AvButtonAutoGames').checked = true
If so, this isn't correct - but in the first JS example you have a correct the prop usage:
$('#AvButtonAutoGames').prop('checked', true)
as in HTML5, the syntax to apply is simply <input checked> or to expand for clarity <input checked="checked">. The absence of the checked attribute leads to an unchecked input field.
Simply convert your .checked=X to the functional calls and it should work
Related
I am trying to trigger a click on radio buttons. I have done this successfully on another project so I cannot see why it is not working in this case.
Here is my HTML (taken from Contact form 7):
<span class="wpcf7-list-item first">
<label>
<span class="wpcf7-list-item-label">Yes</span>
<input type="radio" name="example-name" value="Yes" checked="checked">
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<span class="wpcf7-list-item-label">No</span>
<input type="radio" name="example-name" value="No">
</label>
</span>
And here is my jQuery:
jQuery(document).ready(function () {
jQuery("#yes-btn").click(function () {
jQuery(this).addClass('checked');
jQuery("input[value='Yes']").trigger('click').addClass("working");
});
jQuery("#no-btn").click(function () {
jQuery(this).addClass('checked');
jQuery("input[value='No']").trigger('click').addClass("working");
});
});
I know the selector is working correctly because the .addClass() works just fine.
I have also tried .prop("checked", true) instead of trigger("click") without success.
I am using jQuery 3.3.1.
How to fix this?
It works when you change the 'single quotes' from around yes and no to "double quotes". Also works with no quotes around the Yes and No, must not like single quotes in the selector.
jQuery(document).ready(function() {
jQuery("#yes-btn").click(function() {
jQuery(this).addClass('checked');
jQuery('input[value="Yes"]').trigger('click').addClass("working");
});
jQuery("#no-btn").click(function() {
jQuery(this).addClass('checked');
jQuery('input[value="No"]').trigger('click').addClass("working");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="wpcf7-list-item first">
<label>
<span class="wpcf7-list-item-label">Yes</span>
<input type="radio" name="example-name" value="Yes" checked="checked">
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<span class="wpcf7-list-item-label">No</span>
<input type="radio" name="example-name" value="No">
</label>
</span>
<button id="yes-btn">Yes</button>
<button id="no-btn">No</button>
Using Jquery with Ruby on Rails and the Simple Form Gem I can successfully show / hide a div on changing a radio button, however despite numerous attempts I can't get this to work on page load - divs are always showing, whether the radio button is true or false. Any help would be great thanks.
jQuery(document).ready(function() {
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
UPDATE - HTML OUTPUT OF RADIO BUTTONS:
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: block;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>
Your code above adds an event handler for the change event on the radio button. Aside from that, you need to check the value of the :checked radio button on page load, and show/hide based on that.
Note: To prevent flickering, give the element an initial style of display: none.
jQuery(document).ready(function() {
if ( jQuery('[name="user[nurse_attributes][qualified]"]:checked').val() !== 'true' ) {
jQuery('#denied-quote-one').show();
}
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: none;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>
Say I have some checkboxes like below:
<label class="ck-button" id="1">
<input type="checkbox" name="form-field-checkbox" class="ace chkb">
<span class="lbl txt" >1</span>japan
</label>
<label class="ck-button" id="2">
<input type="checkbox" name="form-field-checkbox" class="ace chkb">
<span class="lbl txt" >2</span>Uk
</label>
<label class="ck-button" id="3">
<input type="checkbox" name="form-field-checkbox" class="ace chkb">
<span class="lbl txt" >3</span>USA
</label>
Since I have special usage of this checkbox I have a function to prevent it's default action and use prop() to check it. I am using $(this) here is because I have lot of similar buttons.
$(".ck-button").click(function(event) {
event.preventDefault();
$(this).find(".ace .chkb").prop('checked', true);
});
I thought find() allows me to get access to the checkbox and check it but it doesn't work, why?
So I am using the PrintThis JQuery plugin in order to print a form field, but for some reason I am unable to have the plugin print out any changes made to the checkboxes. When I click "Print", the only checkbox that appears to change is one that has a "checked" property by default. Any ideas on how to fix this?
HTML:
<body>
<div id="print">
<form>
<input id="option" type="checkbox" checked>
<label class="checkbox" for="option"> You are 18 years or older</label>
<br><br>
<input id="option2" type="checkbox">
<label class="checkbox" for="option2"> You have tested positive for something in your blood</label>
<br><br>
<input id="option3" type="checkbox">
<label class="checkbox" for="option3"> You have health-related kidney problems</label>
<br><br>
<input id="option4" type="checkbox">
<label class="checkbox" for="option4"> You have health-related skin problems</label>
<br><br>
<input id="option5" type="checkbox">
<label class="checkbox" for="option5"> You have a low platelet count</label>
</form>
</div>
<br>
<br>
<input id="printButton" type="button" value="Click here to download and print this checklist to review with your doctor." />
</body>
JSFiddle: http://jsfiddle.net/Hybridx24/bxtpv26x/
Not sure what the problem might be here, but you can get around it by explicitly setting the checked attribute for the checkboxes that are checked.
$("input:button").click(function () {
$('input[type="checkbox"]').each(function() {
var $this = $(this);
if($this.is(':checked')) {
$this.attr('checked', true);
} else {
$this.removeAttr('checked');
}
});
$("#print").printThis({'importStyle': true});
});
Check Fiddle
So after skimming through the plugin's source. Looks like there's a property for form values. I added it in and it seems to work.
$('#selector').printThis({formValues:true});
http://jsfiddle.net/wzp0e9r9/
I have an HTML form and defined an checkbox for that.
My sample code for this:
<label class="checkbox inline" >
<input type="checkbox" id="http" name="HTTP" <%=transport_http%>/>
<input type="hidden" id="http_checked" name="http_checked" value= <%if(transport_http == "checked"){%>"http"<%}else{%>""<%}%>/>
</label>
Here I always get the value as "checked" even if I uncheck the box. What might be the wrong?
I read my hidden variable parameter in a javascript like;
var transport =request.getParameter("http_checked")
For this varibale i always get value as "http". (even if i checked or not checked the box) why is that?
I corrected as follows:
<div class="checkbox">
<label class="checkbox inline" >
<input type="checkbox" id="transport_http" name="transport_http" value="http" />
</label>
<label class="checkbox inline" >
<input type="checkbox" id="transport_https" name="transport_https" value="https"/>
</label>
</div>
And reading the value in a javascript like
request.getParameter("transport_https"),request.getParameter("transport_http")
works