Don't dismiss this as a newbie question! It's not, I'm not, I've tried everything, and its a complex/convoluted environment that my code is in.
Okay - here goes. I'm adapting someone else's html/js/css code and trying to get it to work on my server (I've taken permission - please, no comments on that). The main html generates a overlaid form which has a checkbox which is unchecked that I need to mark as checked before presenting to the user.
The checkbox code is just:
<input type="checkbox" id="type" />
<label for="type" id="disable">Disable check</label>
I've tried changing the above to ALL of the following (AND doing Ctrl+F5 when trying it out on the browser):
<input type="checkbox" id="type" CHECKED/>
<input type="checkbox" id="type" checked>
<input type="checkbox" id="type" checked="checked"/>
<input type="checkbox" id="type" checked="checked" value="1"/>
<input type="checkbox" id="type" value="true" checked>
<input type="checkbox" id="type" name="tempname" checked="checked"/>
<input type="checkbox" id="type" checked=true/>
At the end of the page: <script type="text/javascript">document.getElementById("type").checked=true;</script>
The problem COULD be elsewhere - something somewhere COULD be setting it to a default value of unchecked, but (a) that's a bit unlikely, and (b) I did look at the accompanying js code but no luck on a preliminary search.
Thoughts? 'cause I'm all out... :(
It's a fairly simple question, if only because checkboxes are fairly simple things :)
If
<input type="checkbox" id="type" name="name" checked="checked"/>
doesn't work then I would strongly suggest taking a bigger dig through the javascript being loaded on the page.
Have you looked into the JavaScript to see if there is code that is marking the checkbox unchecked onclick?
Related
I asked this question a month ago: I'm trying to put a <button> inside an <input type="radio">'s <label>
The answer I marked correct worked perfectly... for the desktop browsers I tested. Testing on my iPhone 6, both Safari and Chrome have the buttons unclickable.
Correct answer snippet copied below:
button {
pointer-events:none;
}
<h1>Choose A or B</h1>
<input type="radio" name="choice" value="A" id="a"><label for="a"><button type="button">A</button></label>
<input type="radio" name="choice" value="B" id="b"><label for="b"><button type="button">B</button></label>
Is there a solution that works for both smartphone AND desktop?
I could get rid of <input type=“radio”> and rewrite radio button behaviour in JavaScript from scratch, but I'm hoping I won't need to do that. Is there an easier way?
<h1>Choose A or B</h1>
<label>
<input type="radio" name="mode" value="create">
<span style="-webkit-appearance: button;">create table</span>
</label>
<label>
<input type="radio" name="mode" value="create">
<span style="-webkit-appearance: button;">create field</span>
</label>
I guess kind of a silly question here. I have created a .html file on my desktop outside of fiddle (so please don't test it in fiddle but just create a .html file on your computer to test this). in the file I JUST have 3 radio buttons and jquery attached. However, boxes never work right as checked or clicked attribute never gets set on them and literally they don't alternate when checked on. What am I missing here?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="well" value="well" />1 - Very well<br />
<input type="radio" name="little" value="little" />2 - A little<br />
<input type="radio" name="not" value="not" />3 - Not at all<br />
</body>
However, boxes never work right as checked or clicked attribute never gets set on them
None of the code you've supplied will set the checked attribute.
You need to actually set it, to set it:
<input type="radio" name="well" value="well" checked>
Note: Browsers remember the state of forms when refreshing the page. If you are testing by modifying the HTML and then clicking the refresh button, you may not see any effect. Click the address bar and press enter to avoid this problem.
There is no clicked attribute for the input element.
they don't alternate when checked on
They have different name attribute values. To be part of the same radio group, each radio button must share the same name.
You have three groups, each with one member.
Your radio buttons don't know they're related. The name attribute should be the same, while the value can be changed for each.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rating" value="well" />1 - Very well<br />
<input type="radio" name="rating" value="little" />2 - A little<br />
<input type="radio" name="rating" value="not" />3 - Not at all<br />
In order for them to be mutually exclusive (so that when you select one, it deselects any others) all of the radio elements have to have the same name. Change your code like so and it will work:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="radio" value="well" />1 - Very well<br />
<input type="radio" name="radio" value="little" />2 - A little<br />
<input type="radio" name="radio" value="not" />3 - Not at all<br />
</body>
</html>
Simple and easy.
I got two radio buttons.
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
How do i validate in AngularJS that at least one is chosen? And how can i type something like
$scope.myForm.gender.$invalid
Any ideas?
Without a form, you can fix this by check the value of the models in your controller, returning an error if both are false. You could also go ahead and set one true by default.
But to answer your question, you can do something similar to $scope.myForm.gender.$invalid all you have to do is wrap your input tags in a form with the name myForm. So, it would like:
<form name="myForm">
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
</form>
Then, $scope.myForm would be able to give you certain properties, like $isPristine and properties for each input field.
Either of these ways will work though, so I help that helps!
use required :
<input type="radio" name="gender" ng-model="male" required>
<input type="radio" name="gender" ng-model="female" required>
DEMO
same Question asked here : Validate Radio Button AngularJS
Take this code for Example
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
It allows a user to select one button at a time, I was always under the impression that javascript was the answer to this type of a solution. So my question is, is there any embedded javascript in the HTML radio button and if not, where is the function coming from?
Its the Browser's duty to do that for us.
Why?
Because the behavior is stated in the spec:
http://www.w3.org/TR/html/forms.html#radio-button-state-(type=radio)
Is it possible to check or uncheck a set of checkboxes on a page a) without looping, and b) without using a Javascript framework such a jQuery?
This question is related but is about (un)checking all the checkboxes on a page with jQuery.
I expect the answer to my question will probably be "no", but if there's some weird, hacky way of doing it (not weird and not hacky is good too!) then I would like to know. Call it curiosity if you will.
Edit: I suppose what I'm really asking is for a way to do it in O(1) (constant time) rather than O(n) (linear time with respect to the number of checkboxes)
If the buttons are in a form, you can use a reset button if the default state is unchecked and you don't mind resetting all the other controls in the form. Otherwise, you have to use a loop regardless of whether you use POJS or a "framework".
Look ma, no script!
<form action="#">
<div>
<input type="checkbox" name="cb0">
<input type="checkbox" name="cb1">
<input type="checkbox" name="cb2">
<input type="checkbox" name="cb3">
<br>
<input type="reset" value="Uncheck all">
</div>
</form>
One way you can go about checking or unchecking a set of checkboxes on a page is to reference each one individually.
This meets both criteria "a" (no looping) and criteria b (no framework)
You could do it with map(), which may or may not be a loop, depending on how strict of a definition you use for "loop" :) But in all practical terms, it's just another way of casting a loop. I'd say the answer to your question is "no."
EDIT:
var checkboxes = getElement...
checkboxes.map(function(c) {
c.checked = true;
});
You may modify/override the full HTML code:
<div id="checkBoxes">
<input name="foo" type="checkbox" value="1" />
<input name="bar" type="checkbox" value="1" />
<input name="baz" type="checkbox" value="1" />
</div>
<script type="text/javascript">
function checkAll(){
document.getElementById("checkBoxes").innerHTML =
'<input name="foo" type="checkbox" value="1" checked="checked" />'
+'<input name="bar" type="checkbox" value="1" checked="checked" />'
+'<input name="baz" type="checkbox" value="1" checked="checked" />';
}
function uncheckAll(){
document.getElementById("checkBoxes").innerHTML =
'<input name="foo" type="checkbox" value="1" />'
+'<input name="bar" type="checkbox" value="1" />'
+'<input name="baz" type="checkbox" value="1" />';
}
</script>
no Loop, no Framework, just a little bit unesthetic..