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.
Related
I have this checkbox input that I want it to call a function when its clicked
<div class="checkbox theme-search-results-sidebar-section-checkbox-list-item">
<label class="icheck-label">
<input class="icheck" type="checkbox" onclick="system()">
<span class="icheck-title" >
system is good
</span>
</label>
</div>
I tried different methods the only way that I got it to work was by using the onclick on the span but that would not work if the box gets checked!
Can anyone help me with this?
I can't change the layout because I have a fixed HTML that is like this for a lot of checkboxes.
This appears to be working the way you describe it with a simple "system()" function. The problem may be in your system() function.
function system(){
console.log("inside system")
}
<div class="checkbox theme-search-results-sidebar-section-checkbox-list-item">
<label class="icheck-label">
<input class="icheck" type="checkbox" onclick="system()">
<span class="icheck-title" >
system is good
</span>
</label>
</div>
Try this. First select the check box in JavaScript:
const $checkbox = document.querySelector('.icheck');
Then add a click event listener to it:
$checkbox.addEventListener('click', system);
This will run system when it is clicked.
I have a code like this.
<label class="pr-container">
Please confirm you have read and understood out
<span #click="openConditionsModal($event, 'terms')" class="pr-default-link">Terms & Conditions</span> and
<span #click="openConditionsModal($event, 'policy')" class="pr-default-link">Privacy Policy</span>.
bla blabladasd
<input v-model="agreed" type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
When I click Terms and Condition or Privacy policy spans, what also happens is <input v-model="agreed"> also gets marked. If clicking again, it gets unmarked. What I want is when clicking on span, checkbox and its value shouldn't change at all.
Any ideas why it happens and how to avoid that?
Try .stop or .self modifiers to stop the event propagation as follows :
<span #click.stop="openConditionsModal($event, 'terms')" ...
or
<span #click.self="openConditionsModal($event, 'terms')" ...
learn more about event modifiers
Try to refactor your HTML like this
<div class="pr-container">
Please confirm you have read and understood out
<span #click="openConditionsModal($event, 'terms')" class="pr-default-link">Terms & Conditions</span> and
<span #click="openConditionsModal($event, 'policy')" class="pr-default-link">Privacy Policy</span>.
bla blabladasd
<label>
<input v-model="agreed" type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
This is happening because your spans are part of a label that's associated with an input (you placed the input inside of the label). Clicking on a label associated with an input will focus or trigger the input.
I'd recommend restructuring your html and using css to fix this. Generally this approach is more robust and accessible than applying event modifiers like stop and prevent.
Your structure could look something like this:
<label for="agreed">Check here to indicate that you understand:</label>
<span>Terms & Conditions</span>
<span>Privacy Policy</span>
<input v-model="agreed" type="checkbox" id="agreed">
You can use CSS and a bit of restructuring to make the spans and the label all appear as one unit. Note that a screen reader will tie the label to the input so having it makes sense on its own is a good idea.
I've worked on this for quite some time now, and am stumped. I'm hoping someone has some direction for me. First the code:
The jQuery:
$("#paperwork").bind("onFail", function(e, errors) {
if (e.originalEvent.type == 'submit') {
$.each(errors, function() {
var input = this.input;
input.parent().css({color: 'red'}).change(function() {
input.parent().css({color: '#444'});
});
});
}
});
And a sampling of the HTML:
<input id="group_1" required="required" type="radio" name="attending" value="Yes" />Yes
<input id="group_1" type="radio" name="attending" value="No" />No
<input id="group_1" type="radio" name="attending" value="Not Provided" />Not Provided
<input id="group_1" class="single_text_input" type="text" name="primary_referral" />
<input id="group_1" class="single_text_input" type="text" name="secondary_referral" />
<span class="group_1">Referrals</span>
There are several sections that look much like the above. Each with a corresponding <span> (e.g. "2", "3", etc...) What I'm trying to accomplish is this:
When the validator runs, the .parent() element of each input turns red. That is working. When the user makes a change to the input, the .parent() element returns to its original color. That is also working.
In addition to this, I would like to turn each input section's corresponding <span> red (text or background). Then, when all the inputs within that section are changed, the corresponding <span> is returned to its original appearance. One issue (at least for me) is that the div containing the inputs and the corresponding <span> do not seem to be related to each other, whether by .parent(), .child(), or .closest.
One issue (at least for me) is that the div containing the inputs and
the corresponding do not seem to be related to each other,
whether by .parent(), .child(), or .closest.
Check if that is true by trying to reach the span in a live console like the Google Chrome Inspector's one.
Just set a class common to those divs, so you can select them later by that class.
I have checkbox. I want to switch the style of the div containing the checkbox, if the checkbox is checked.
<label for="ids">
<div>
<img src="img/87_1180.jpg">
<h4>Name</h4>
<input name="ids" id="ids" type="checkbox">
</div>
</label>
When user clicks on the label, the checkbox gets checked. I want to add class if the checkbox is checked.
I appreciate any help.
$("#ids").click(function() {
$(this).parent().toggleClass("yourClassName");
});
Josh,
Actually usually the correct way to use a label would be something like this:
<label for="ids">Name</label>
<input name="ids" id="ids" type="checkbox" />
I don't think it's common practice to put the input within the label according to W3C standards, see:
http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL
While it might validate the way you wrote the code, it's much harder to control style specifically.
Try this code to change the label:
$("#ids").click(function() {
$('label[for="' + $(this).attr('name') + '"]').toggleClass('myClass');
});
I'm struggling to find a solution for this anywhere on Google, maybe i'm searching incorrectly but thought I would come and ask the ever trustworthy members of StackOverflow.
I'm wanting to use an html button to check an html check box. There reason I don't want to use the check box will be purely for accessibility reasons because the application i'm developing will be on a terminal and used as via a touch-screen so an HTML check box is too small.
The only issue is that the list of check box's is dynamic as it is populated using an SQL query. Obviously however I can do the same for creating HTML buttons.
Im guessing it will require JavaScript (which I'm perfectly happy using now as I'm finding a lot of the functionality I need in this application needs JavaScript) to do this functionality.
So to clarify: I want to click on a button, say it has a value of "Fin Rot" and that checks the check box with the value "Fin Rot". And then if I clicked another button, say it has a value of "Ich" then it also checks the check box with the value "Ich"
While you can use a button and JavaScript for this, might I suggest a much simpler approach? Just use a <label> that's designed just for this, and style it like a button, for example:
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<label for="finRot">Some text here, could be "Fin Rot"</label>
or (if you don't want to use id on checkbox and for on label):
<label>
<input type="checkbox" name="something" value="Fin Rot">
Some text here, could be "Fin Rot"
</label>
....then with CSS you can hide the checkbox if needed, but either are clickable to toggle the checkbox.
You can test out a demo here, also showing some button-ish CSS on the label if needed.
This example uses a button to toggle the checkbox on/off.
http://jsfiddle.net/DnEL3/
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button>
How about a HTML solution.
<p><input type="checkbox"
value="Another check box"
name="cboxwithlabel" id="idbox"><label
for="idbox">Another
checkbox</label></p>
<label> Creates label for the checkbox or radio buttons.
If you are looking for bootstrap solution, I just created this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Here starts the component -->
<label class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="form-control btn btn-primary">
Click to toggle checkbox
</span>
</label>
<!-- Here ends the component -->
</div>
</div>
</div>