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());
}
});
});
}
Related
The short story is that I need to use a toggle switch to determine which of my methods are gonna be called. So I'm guessing that you can get a Boolean, referring to whether the switch is on or off? but how do I get that?
So I've implemented a toggleswitch in html
<label class="switch">
<input type="checkbox" id="ToggleswitchId" >
<span class="slider round"></span>
</label>
I've seen somebody do something like this, with javascript.
var switchTrueFalse = document.getElementById('ToggleswitchId').checked
but all I get is "Property 'checked' does not exist on type HTMLElement"
checked is not a method. It is one of the <input> attributes which is a boolean.
So, document.getElementById('ToggleswitchId').checked returns true when it is checked
checked is a property of checkbox input which returns true or false.
function clickCheckbox() {
if (document.getElementById('ToggleswitchId').checked) {
console.log("check")
} else {
console.log("uncheck");
}
}
<label class="switch">
<input type="checkbox" id="ToggleswitchId" onClick="clickCheckbox()" >call method
<span class="slider round"></span>
</label>
Since it is an input tag, try using HTMLInputElement instead of HTMLElement.
Try using this code instead, and see if it works:
document.getElementById("ToggleswitchId") as HTMLInputElement).checked
You need to call a JavaScript function on the check/uncheck of check box.
function test() {
var switchTrueFalse = document.getElementById('ToggleswitchId').checked;
console.log(switchTrueFalse);
}
<label class="switch">
<input type="checkbox" id="ToggleswitchId" onclick="test()" >
<span class="slider round"></span>
</label>
I have a form on my webpage and its being submitted to a NodeJS backend.
I'm having trouble with the checkboxes. When the are submitted to server, and I read them via req.body.foods, I get something like ['on', 'on', 'on'].
But I want to get the actual values, that is, something like ['dairy', 'fish'] etc.
How can I do that?
<div class="col-sm-6">
<div class="checkbox">
<label><input name="food" type="checkbox" value="dairy">Dairy</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="meat">Meat</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="fish">Fish</label>
</div>
</div>
You can do the following in the node.js file:
console.log(req.body.food); //This will print the array of values.
If you have only one checkbox selected in the page, (eg: Dairy) it will print "dairy". If more than one checkbox, then you get "{ 'dairy', 'meat' }" in the output. Make sure the checkboxes are within the form.
Another method:
Include a hidden input element in your form:
<input name="SelectedValues" type="hidden" value="">
Also include a call to a javascript file in the onchange event of every checkbox, or in the onclick event of the submit button in the form.
onclick='buildlist("YourCheckBoxName","SelectedValues");'
Use a javascript function to loop through your checkbox and build a comma separated list of selected values:
function buildlist(listName,labelName){
var controls = document.getElementsByName(listName);
var label = document.getElementsByName(labelName);
label.value = '';
for(var i=0;i<controls.length;i++){
label.value += controls[i].value.toString()+',';
}
}
Now inside the node.js file, use the following code to access the list of values:
req.body.SelectedValues
Looks like you are using bootstrap to generate your form checkboxes. Try using the "form-check" and "form-check-input" classes instead.
<div class="form-check">
<input class="form-check-input" type="checkbox" name="food" value="dairy" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">Dairy</label>
</div>
Does anyone know what is the proper CSS selector for selected (:checked) AngularUI's radio button? I tried "checked", "selected", "active", but none of this does the work. I need to find a similar selector as :checked for HTML radio button.
Every useful answer / JSFiddle is highly appreciated and evaluated.
Thank you.
If it's styling you're after then use ng-class bound to the ng-model:
<input type="checkbox" ng-model='stuff' ng-class='{class1: stuff, class2: !stuff}'>
and add css rules for classes class1 and class2
Since you are using angularjs,instead of using jquery selectors like :checked or :active,you can just use the angularjs functionalities to detect the active checkbox.
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-click="yourFunction()" ng-model="formData.favoriteColors.red"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
</label>
</div>
cosider this as your checkboxes,now in your js (ie)your controller
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData = {};
$scope.yourFunction = function() {
/**function to call when a checkbox with model formdata.favourite colors.red is selected **/
};
});
Notice I have include functions for only one checkbox.You can do it for each of these check boxes
You might find this fiddle useful
http://jsfiddle.net/ShinyMetilda/C9V39/
Also this example in the documentation will be usefull
https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
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
});
I'm using jQuery.
On click the search button is used the flag to check if radiobutton is unchecked it will show alert("enter the field") otherwise do the task... and also I used event.preventDefault();
Here actually I'm using radiobutton in which I used gender label that contains two option male and female. Now the problem is when I checked male radio button or female. Still it's showing enter the field. I think there must be something wrong in this part if($('#gender').is(":not(:checked)"))
here is my code:
$('#searchbutton').click(function(event){
alert("ZZ");
var flag3=0;
if ($('#gender').is(":not(:checked)"))
{
flag3=1;
}
if( flag3==1)
alert("Select the field first");
event.preventDefault();
});
<input type="radio" name="gender" id="gender" value="male" /> Male<br />
<input type="radio" name="gender" id="gender" value="female" /> Female
<input type="submit" name="searchbutton" value="Search" id="searchbutton">
You have several problems in your code.
An ID can only be used once in a HTML document. You used #gender twice.
You don't need to use another flag variable, you can run the if simply.
In your second if you have not used {} brackets, thus preventDefault is always executing.
I suggest you do something like this:
<input type="radio" name="gender" value="male" /> Male<br />
<input type="radio" name="gender" value="female" /> Female
<input type="submit" name="searchbutton" value="Search" id="searchbutton">
and the jQuery:
$('#searchbutton').click(function(event){
if ($('input[name="gender"]:checked').length < 1) {
alert("Select the field first");
event.preventDefault();
}
});
Working Demo
Explanation: The attribute selector will match inputs whose name is gender, and the :checked selector only selects the ones that are checked. Then using length we can see how many elements were matched. If zero, that means that the use has not selected any of the options.
From what I understand, you are trying to make sure the user makes a selection on gender.
The immediate problem is that both <input type="radio">s have the same id. While it is proper to give them the same name, you never give two elements the same id.
Additionally, you should simply be checking if any of the radio buttons are checked. This is how I would write the above code:
$('#searchbutton').click(function (e) {
if ($(':radio:checked[name="gender"]').length == 0) {
alert("Select the field first");
e.preventDefault();
}
});