Checkbox is always "checked" - javascript

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

Related

How to reset all radio buttons except for the one with a checked attribute?

I am attempting to reset a form field by wiping all checked properties and then applying the checked property back to the one with a "checked = 'checked'"attribute.
However, I'm not sure how to only select the element that passes my if statement, as console.log(thingo) is logging all three checkboxes.
$('a').click(function () {
if ($(this).parents('.form-field').find('.form-check-input').length != 0) { // does the revert button belong to a group with radio button inputs?
$(this).parents('.form-field').find('.form-check-input').prop('checked', false); //clear all checkboxes
var thingo = $(this).parents('.form-field').find('.form-check-input'); //set checkboxes to thingo
if (thingo.attr('checked') != null) {
console.log(thingo);
thingo.prop('checked', true); //attempt to set all checkboxes with attribute checked to be checked
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="form-group form-field">
<label class="form-check-label">
Sex
<span>[Revert]</span>
</label>
<div class="form-check">
<input type="radio" class="form-check-input" value="0" checked="checked">
<label class="form-check-label">Male</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" value="1">
<label class="form-check-label">Female</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" value="2">
<label class="form-check-label">Unclear</label>
</div>
</div>
This can be quite simply solved by using Jquery's attribute selector. All I have to do is:
$(this).parents('.form-field').find('.form-check-input').prop("checked", false);
//^this line clears all existing checks
$(this).parents('.form-field').find("[checked = 'checked']").prop("checked", true);
//^this line finds the checked attribute with the attribute selector and sets it to checked
$('button').on('click',function () {
var formField = $(this).parents('.form-field');
var formFieldInputs = formField.find('.form-check-input');
if (formFieldInputs.length){
formFieldInputs.prop("checked", false); //clear all checkboxes
formField.find('.form-check-input-default').prop("checked", true);
}
});
HTML format, just add a default class
<div class="form-group form-field">
<label class="form-check-label">
Sex
<span>[<button>Revert</button>]</span>
</label>
<div class="form-check">
<input type="radio" class="form-check-input form-check-input-default" value="0" checked />
<label class="form-check-label">Male</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" value="1" />
<label class="form-check-label">Female</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" value="2" />
<label class="form-check-label">Unclear</label>
</div>
</div>
Some elements here:
Use button instead of a. Clicking on a button does do something though, when used in its natural environment
Use jQuery.on instead of jQuery.click see : Difference between .on('click') vs .click()
For checked attribute see : What's the proper value for a checked attribute of an HTML checkbox?
you don't need to write checked="checked" but its actually only checked
when you want some button to be true by default you just need to add checked
refer this link once:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
I think this can help you

checkbox default checked="checked" is not working?

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

Dynamic checkboxes - check by a onclick function

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?

AngularJS checkbox uncheck

How in angular when a checkbox is uncheck, the form data will be reset.
<div class="form-group">
<input type="text" verify-store ng-model="user.merchant_store_name" class="form-control" name="merchant.store_name" placeholder="Store Name" ng-model-options="{ updateOn: 'blur' }" required>
<div ng-if="signupForm.$pending.usernameExists">verifying....</div>
<div ng-if="signupForm.$error.usernameExists[0].$viewValue">
<label class="control-label" style="color:red">A store with that name already exists. Please select another name.</label>
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="user.merchant_mobile_phone" placeholder="Phone" >
</div>
</div>
<div class="checkbox clip-check check-primary">
<input type="checkbox" id="agree" ng-model="signupForm.agree" value="agree" ng-required="!signupForm.agree">
<label for="agree">I agree</label>
</div>
<div class="checkbox clip-check check-primary" ng-show="signupForm.agree">
<input type="checkbox" id="merchant" ng-model="signupForm.merchant" value="merchant" >
<label for="merchant">Sign up as merchant</label>
</div>
Is there a way this can be done within the view template rather than passing it to controller. Or should I write a directive for this?
Thanks!!
You don't have to write a single line in your controller to achieve your task with the following two DOM settings.
<input type="text" ng-model="myText">
<input type='checkbox' ng-model='chkMonitor' ng-click='!chkMonitor && (myText = "")' >
Explanation:
Your inputs are bound to the scope through scope variables. Now you place your code in ng-click of the check box to execute the clearing code. This has to be done only when the check box is unchecked. So, first check for this in a boolean expression before executing your clearing code :
ng-click='!chkMonitor && (myText = "")'
Your myText = "" will never execute as long as the chkMonitor is false.

PrintThis Not Capturing Checked Checkboxes

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/

Categories