Is there a way to asign a label for to a class name?
This is my code:
<input type="radio" id="answers1" name="answer1" value="1" checked>
<label for="answers1" class=lfirst>1</label>
<input type="radio" id="answers2" name="answer1" value="2">
<label for="answers2" >2</label>
<input type="radio" class="answers" name="answer1" value="3">
<label for="answers" for="answers" >3</label>
<input type="radio" class="answers" name="answer1" value="4">
<label for="answers" >4</label>
<style>
input[type=radio]:checked + label {
background: #2C337B;
color: #ffffff;
}
</style>
My first 2 radiobuttons are clickable because the label for is asigned to the id name of the radiobutton. My 2 other buttons are not clickable because the label is asigned to a class. Is there anyway to change this? Or is it OK to just use id's (total would be over 600 same id's names)?
You can give same class to different elements. But label is unique to identify the element. You can have unique labels for your radiobuttons and "label for" can be assigned to each element.
If you are using label for only for associating it with the radio button, then no need for it. You can directly give the radiobutton inside the label tag
yes, you cannot have a label pointing to the class, that's because label should be assigned to only 1 element, and should you know, classes are not uniqe (but ID's are)
on the other hand, you can do some jQuery workaround, like this:
$('label').on('click', function(){ // after we click a label
var el = $(this).attr('for'); // we get its "for" attribute
$('.' + el).focus(); // prepend it with "." to make a class name, and then focus on objects with that class
});
Related
In my html page, I cant add two radio buttons, I get an error in free-code-camp and that is about to have two radio buttons in label element with attribute of same name value for both of them in input self-closing tag.
I tried the same value for name attribute in input tag within the label element. but I got error.
<label>
<input id="indoor" type="radio" name="indoor-outdoor" > Indoor
</label>
<label>
<input id="outdoor" type="radio" name="indoor-outdoor" > Outdoor
</label>
The following example shows three radio buttons with the same name, within a label, within a form.
This is a valid structure.
const handleSubmission = (form, event) => {
event.preventDefault();
console.log(`Choice: ${form.elements.foo.value}`);
};
<form onSubmit="handleSubmission(this, event)">
<label>
<strong>Choice:</strong>
<input type="radio" name="foo" value="a" /> A
<input type="radio" name="foo" value="b" /> B
<input type="radio" name="foo" value="c" /> C
</label>
<button type="submit">Submit</button>
</form>
I have {{policy.isActiveInPolicyGroup}} which is Boolean, I want the radio input be checked if it was true.
<div ng-repeat="policy in item.policies">
<input type="radio" ng-model="item.selectedPolicy" id="policy_{{$index}}"
name="test" ng-value="policy.id">
<label class="custom-control-label" for="test">
{{item.name}}
</label>
</div>
The first thing you should know it's about value of inputs with radio type:
Recommended
the radio inputs can't define by Boolean, if inputs are more than 2 we can't define value as Boolean so we should set a different value for each of them.
Ex: <input type="radio" name="test" ng-value="1">, <input type="radio" name="test" ng-value="2"> , <input type="radio" name="test" ng-value="3">
Not Recommended
Note: Except when input number is 2: in this case we can set value false or true
Ex: <input type="radio" name="test" ng-value="true">, <input type="radio" name="test" ng-value="false">
radio input Note:
all radio inputs in one group should have same name
checkbox input:
inputs with checkbox type by default define with Boolean value because we can set different name for each of them, and result is checked [true] or not [false]
ng-model and ng-value
Radio input should have two attributes ng-model and ng-value that because in angularjs logic ng-model should equal ng-value and can't do it by one attribute.
Only set ng-model value like following:-
$scope.item.selectedPolicy = $scope.policy.id;
It will be checked if its ng-true value matched with its ng-model value.
DEMO of Radio Buttons that Use Boolean Values1
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
<fieldset>
<input type="radio" name="radio"
ng-model="model" ng-value="false">false<br>
<input type="radio" name="radio"
ng-model="model" ng-value="true">true<br>
</fieldset>
<fieldset>
<input type="checkbox" ng-model="model">check<br>
</fieldset>
model={{model}}
</body>
For more information, see
AngularJS <input type="radio" Directive API Reference
AngularJS <input type="checkbox" Directive API Reference
How would i add the "value" that are selected from radio boxes in html forms? So when someone selects an option it would add the other "values" onto it and total that it at the bottom of the page. And does anyone know if it could add "names" total "values" onto it as well? thanks
My code looks like this:
<h3><u>Title</u></h3><br>
<form action="">
<input type="radio" name="num" value="0">Text<br>
<input type="radio" name="num" value="2">Text<br>
<input type="radio" name="num" value="80">Text<br>
<input type="radio" name="num" value="110">Text<br>
<input type="radio" name="num" value="85">Text<br>
<input type="radio" name="num" value="120">Text<br>
</form>
You cannot. By definition, a set of radio buttons with the same name attribute contributes at most one value to the data set, the one corresponding to the selected button.
If you want something else, you should handle that server side, or use other types of controls, or redesign the entire approach.
Working example :
(using a Javascript library, jQuery, but could be done in plain JavaScript)
You mainly have to change your inputs to type="checkbox" in the HTML
What code does : when a checkbox's state is modified, all checked checkboxes' value are summed up in the last input field I've added
The checkboxes are targetted by looking for "num" in their name, if you remove that the checkbox won't be taken into account by the script.
$(function() {
$("input[name*='num']").on("change", function() {
var total = 0;
$("input[type='checkbox']:checked").each(function() {
total += Number($(this).val());
});
$("#total").val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
<u>Title</u>
</h3>
<br>
<form action="">
<input type="checkbox" name="num0" value="0">Add 0<br>
<input type="checkbox" name="num2" value="2">Add 2<br>
<input type="checkbox" name="num80" value="80">Add 80<br>
<input type="checkbox" name="num110" value="110">Add 110<br>
<input type="checkbox" name="num85" value="85">Add 85<br>
<input type="checkbox" name="numwhateveryoulike" value="120">Add 120<br>
Total <input type="text" value="0" id="total">
</form>
I have a label tag that I am trying to link to an input type checkbox tag. I have multiple labels and multiple checkbox inputs, and they all have the same id and the same name, but different values. Can someone instruct me as how to construct a label that links to a value rather than an id? So this:
<label for="8994"></label>
Would link to:
<input id="member_ids_" name="member_ids[]" type="checkbox" value="8994">
Or is this not possible?
The label's for attribute must match the ID of the <input> element it refers to. In your case it would be something like:
<label for="member_id_8994"></label>
<input id="member_id_8994" name="member_ids[]" type="checkbox" value="8994">
The 'for' for the form element must match with the ID of the same form element.
<label for="id_1"></label>
<input id="id_1" name="member_ids[1]" type="checkbox" value="8994">
<label for="id_2"></label>
<input id="id_2" name="member_ids[2]" type="checkbox" value="8994">
<label for="id_3"></label>
<input id="id_3" name="member_ids[3]" type="checkbox" value="8994">
<label for="id_3"></label>
<input id="id_3" name="member_ids[4]" type="checkbox" value="8994">
Your DOM elements must have different IDs.
Even if each ID is just set to whatever that value is... ...or whatever.
They can not have the same ID.
Once you've got that out of the way, setting for on a label becomes really simple.
I doubt if that is possible. Label's for are tied to the id attribute of inputs. One way to do achieve your objective maybe through javascript, knockout's declarative bindings for instance.
check it our here: http://knockoutjs.com/documentation/introduction.html
Something along this line:
<label data-bind="click: myInput"></label>
<input type="checkbox" id="hello">
<script type="text/javascript">
var myInput= {
//implement the function to bind the label to the input#hello here
}
};
</script>
http://knockoutjs.com/documentation/click-binding.html
A jQuery solution that probably doesn't work.
$(function() {
ModifyLabels({target: $('input')});
$('input').change(ModifyLabels);
});
function ModifyLabels(eventObject) {
var inputs = $(eventObject.target);
input.each(function(i, input) {
$('label').each(function(i, label) {
if ($(label).attr('for') == $(input).val()) {
$(input).attr('id', $(input).val());
}
});
});
}
OK, what am I missing?
I have:
<form>
<input type="checkbox" name="showRatings" value="1" checked>
<label for="showRatings">Show Ratings</label>
</form>
And when I click on the "Show Ratings" text, the checkbox is not toggling.
I know it's something simple.
I believe the label element links to the id attribute, not the name attribute. Try this:
<form>
<input type="checkbox" name="showRatings" id="showRatings" value="1" checked>
<label for="showRatings">Show Ratings</label>
</form>
Reference here.
When input element is inside the label then we do not need id on the element and 'for' attribute on the label, but when it is outside we need it.
<label>
Foo
<input name="foo" type="checkbox" />
</label>
Clicking on "Foo" will trigger a toggle of the checkbox
try this this will work. it will not work with name attribute.
<form>
<input type="checkbox" name="showRatings" id="showRatings" value="1" checked>
<label for="showRatings">Show Ratings</label>
</form>