I am trying to create a label and placed outer the input check box, like
what I was trying this, My html is
<input type="checkbox">
My jquery is
$('input[type="checkbox"]').after('<label class="label-select"><span></span></label>');
Now the output is
<input type="checkbox">
<label class="label-select">
<span></span>
</label>
But I want like this
<label class="label-select">
<input type="checkbox">
<span></span>
</label>
So how may I write jquery for this. I dont like to change HTML.
Thanks for your answer.
Use wrap() not after():
$('input[type="checkbox"]').wrap('<label class="label-select"></label>').after('<span></span>');
Example fiddle
You're looking for .wrap() jQuery function.
If you use jQuery.wrap() you should be able to achieve what you're looking for.
$('input[type="checkbox"]').after('<span></span>').wrap('<label class="label-select"></label>');
EDIT
Got the two back to front sorry, should be
$('input[type="checkbox"]').wrap('<label class="label-select"></label>').after('<span></span>');
All you have to do is wrap the element (checkbox) inside the label.
$('input[type="checkbox"]').wrap('<label class="label-select"><span></span></label>');
Try this:
$('input[type="checkbox"]').wrap('<label class="label-select"></label>').wrap('<span></span>');
Or you can use jquery append() method to append html inside a block. Try this one,
$('.label-select').append('<input type="checkbox"><span></span>');
Related
I have the following view.It's standard bootstrap for checkboxes,where input is located inside the label
<div class="checkbox">
<label ng-bind-html="vm.trustedHtml">
<input type="checkbox" ng-model="vm.isAcknowledged">
</label>
</div>
I need to bind my trustedHtml property,that contains html,on label.But this directive fully replace the content of the label,including the input.How can I avoid it?The only option I see is changing the html and moving the input out of label,but I don't like it.
No, ng-bind-html does not have anything like "place to insert". It's really straightforward.
add nested <span> and put ng-bind-html on it
include <input> into vm.trustedHtml
Don't use ng-bind-html if you know all variations possible and there are not so many of them: just describe all options with appropriate ng-if
i'm coming from Java background, Is there a label in HTML, where I could using for example javascript update the value.
I mean by label here, something similar like text input, but not not possible to update it, and it looks non-updateable.
You said you wanted something similar to a text input, so... use one, then! Just disable it, like
<input type='text' disabled>
^It's MAGIC!
You don't want label literally in HTML, because it's in no way similar to a text input. Labels in HTML are used for things like putting text in front of radio buttons.
If you wanted something similar to a Java label, you would just use the p tag, unless it would be behind a text input or so, then you would use the label tag.
The obvious to create a label would be using <label>
<label for="coward">Förnamn</label> <!-- points to to input element with id coward -->
<input class="text-input" name="coward" type="text" id="coward" value="whatever" />
But I think you're looking for something to "store a value in a form" that shouldn't be editable. You could use a hidden text input for that.
<input type="hidden" name="hiddenField" value="whatever" />
You could use divs (and style it the way you want it), and then just fetch the html from that div.
Take a look at the other answers as well.
There's a lot of options. What do you actually want to do? It would be easier to give you an answer that suits your needs.
A label is a <label>...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
You have a couple of options.
There is actually a <label> element, which is typically used for labeling the items in a form.
You could also do a text input (<input>) and set it to disabled:
<input disabled>
Or you could just use a simple paragraph element <p> and style it how you want.
Here is a JSFiddle with some examples: http://jsfiddle.net/QXP75/
However, you'd want to use something semantic, so knowing what the purpose is would allow a more specific message. Also, with CSS, you can make just about any element look like anything.
I have a hidden field in my page like so:
<hidden id="tsDaySchedule01" value="7.50"></hidden>
When I try to access it with the following code, the alert returns blank:
alert($("#tsDaySchedule01").val());
Now when I use attr("value") like below, it works without issue:
alert($("#tsDaySchedule01").attr("value"));
Lastly, I would like to point out we have other non-hidden text fields within the page that work without issue using val().
I would like to have a better understanding as for what is going on here. Does anybody have an explanation?
<hidden/> isn't a valid HTML element. If you're wanting a hidden input you'd use:
<input type="hidden" />
jQuery's .val() method only works on input, select and textarea elements. To get this to work for you, change your <hidden/> element to:
<input type="hidden" id="tsDaySchedule01" value="7.50" />
.val() method only works with text-box type of element input and textarea elements.
you should use
<input type='hidden' id="tsDaySchedule01" value="7.50">
Maybe you need to use :
<input type='hidden' id="tsDaySchedule01" value="7.50">
I have been playing around with html lately and ran into a slight issue.
Let us say that there is a form with multiple elements on it. Some of those elements are checkboxes, and you want to hide the checkboxs and their corresponding text. How do you do this without hiding the entire form? The following is what I have tried so far:
<input type="checkbox" id=check1 status="display:none">Option 1<br>
But this hides the box and leaves the text "Option 1" still visible. How do I hide the text as well?
I would suggest using the <label>-tag around the whole thing:
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
This way you can hide the whole line and the user has the advantage that the checkbox toggles, if he clicks the text. You also gain in semantics.
Also note that status is not a valid attribute. For styling use style.
Wrap the input in a div and apply the "style" tag to the div.
<div style="display: none;">
<input type="checkbox" id="check1">Option 1<br>
</div>
you need to wrap it in a span/label and then hide it
<input type="checkbox" id=check1 style="display:none"><label for="check1" style="display:none">Option 1</label><br>
Place checkbox inside div and apply style to div
<div style="display:none"><input type="checkbox" id=check1>Option 1<br></div>
<span style="display:none"><input ...>Option 1</span>
or better
<label for="check1" style="display:none"><input id="check1"...>Option 1</label><br/>
I'm sure you mean style="display:none and not status, but here goes:
Your option text isn't inside the input, nor can it be (for a checkbox), so you'll have to wrap them in a container, then hide the container. Something like:
<div id="checkboxcontainer" style="display: none">
<input type="checkbox" id="check1">
Option 1
<br>
</div>
<input type="checkbox" id="check1" style="display:none">
<label for="check1">Option 1</label><br>
JS:
$('label[for="check1"]').hide();
try something like this
<label style="display:none"><input type="checkbox" id=check1 >Option 1</label>
Use the below to get your desired need.
Wrap the entirety with a label which will then allow you to use style="display:none to hide the label.
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
You also used status instead of style but by using the code above you'll do fine.
Okay, since the other answers were not that describing i can go ahead and be a little more pedagogic.
First of all, the code you have written is perfectly fine, however you lose some control over your content if it's not wrapped inside a HTML tag.
As all the other answers here wrote, you obviously need a label with your input tag:
<input type="checkbox" id="check1"><label for="check1" >Option 1</label>
You have got some different ways of using labels (which is recommended since this gives you more control over your content). My example above uses the "for" attribute, which is a pointer to the input ID to tell the browser what input field the label is for (quite obvious, eh?). You can also wrap your input inside the label (like all the other answers to this thread), which is the way some people prefers (including me):
<label for="check1"><input type="checkbox" id="check1">Option 1</label>
I saw an answer where the person who wrote some (what he called) JS which is code that hides the label with a wrapped input (i.e. the label AND the input is hidden). However, this was JS that is also using jQuery, so you need to implement that framework before you can use that code snippet:
$('label[for="check1"]').hide(); //This hides the label and the input at the same time if you wrap your input!
I recommend you to use the wrapped version of the markup, and implementing jQuery on your page and thereafter apply the codesnippet that is provided in this answer. That can give you the power to show/hide the inputs + labels on, for example, a click on a button or so. Feel free to ask me anything if you want some guidance. :)
/J.
Really a simple question. I tried to use jquery to insert html table rows. One of my rows has value with a subscript. So my question is what is the correct way to do this? Below is my broken code:
$('<td><input type="text" size="5" name="a" value="<sub>b</sub>" id="id_a"/></td>').appendTo('.leslie tr:last')
Thanks!
<input> values do not support HTML tags.
This is completely impossible.
You could use contentEditable instead.
try this:
$('.leslie tr:last').html($('.leslie tr:last').html()+'<td><input type="text" size="5" name="a" id="id_a"/><sub>b</sub></td>')