Im trying to do a linethrough over a label + checkbox both in a separate td.
In my example code I have created 2 tables:
Currently only table 1 is doing a line-through when checkbox = checked. I guess this is working because both elements share a td. Is there a way to fix this so table 2 can line-through instead of table 1? Thanks!
HTML:
<table id = "1">
<tr>
<td>
<input id="oregano" type="checkbox" class="checkedBox" />
<label for="oregano" class="checkedLabel">Oregano</label>
</td>
</tr>
</table>
<table id = "2">
<tr>
<td><input id="oregano" type="checkbox" class="checkedBox" /></td>
<td><label for="oregano" class="checkedLabel">Oregano</label></td>
</tr>
</table>
Stylesheet:
.checkedBox:checked + .checkedLabel {
text-decoration: line-through;
color: blue
}
Fiddle
http://jsfiddle.net/gdmpz506/
That is because you have a different syntax for each table.
If you put the checkbox and label in the same td in the second table it will work just fine. (and of-course make the id unique so that the second label does not point to the first element..)
.checkedBox:checked + .checkedLabel {
text-decoration: line-through;
color: blue;
}
<table>
<tr>
<td>
<input id="oregano-1" type="checkbox" class="checkedBox" />
<label for="oregano-1" class="checkedLabel">Oregano</label>
</td>
</tr>
</table>
<table>
<tr>
<td id="checktd">
<input id="oregano-2" type="checkbox" class="checkedBox" />
<label for="oregano-2" class="checkedLabel">Oregano 2</label>
</td>
</tr>
</table>
Demo at http://jsfiddle.net/gaby/gdmpz506/1/
It works in table 1 because there the input and label elements are siblings, i.e. children of the same element. It is irrelevant that the parent happens to be a td element. You are correctly using the “next sibling” operator +. (Here I’m assuming that you really want just the label struck out.)
The same is not possible when the input and label elements are not siblings, as they cannot be if they are in different td elements. There are no CSS selectors at present to handle such cases. You would need JavaScript to make checking a checkbox strike out the corresponding label.
Related
I have table in which i have input/radio buttons, and i need to make if user selects radio button in specific cell, that cell should have border, so that cell looks like selected. I dont have, any idea how to do this.
Here is example of table.
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten-2-radio" checked="checked">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten-3-radio" checked="checked">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten-4-radio" checked="checked">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="tcr-radio" checked="checked">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
This should be done using jQuery and CSS.
Thanks for help.
This solution is at jQuery and CSS.
The border is added by the class, method addClass(). The class itself must be added to your CSS:
.current {
border: 1px solid green;
}
Also, method closest() is applied, which allows you to refer to the specified parent of the tag <td>.
$('input[type="radio"]').on('change', function() {
$('input[type="radio"]').closest('td.current').removeClass('current');
$(this).closest('td').addClass('current');
});
.current {
border: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="prsten">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
</table>
To get you going in the right direction at least, here are some high level ideas:
When the radio button gets toggled, there are two possible ways you can leverage that to apply a style:
a. events like click and change are fired that you can respond to with your JavaScript.
b. The :checked CSS pseudo-class selector applies to the element if it's toggled on
either by adding/removing an attribute (usually a class attribute like 'active-cell') on the event, or leveraging the native pseudo-class, you'll need to add the styles to represent a border. (Here's a breakdown of why I say 'represent' a border: Applying borders to a single table cell when using border-collapse - it's not quite as simple as adding a css border property.)
Usually toggling a class is going to dramatically simplify your HTML and CSS because you can do a bit of DOM traversal to select a parent element of the input to apply the class and it's styles to.
Using the pseudo class is nifty in that it doesn't require JavaScript, but since CSS doesn't have a 'parent' selector, and you want to style the cell containing the input you have to get creative with your selectors...that would likely be done by having the element right after the input be selected, (or maybe a :before pseduo element) and adding some positioning and other styling to make it look like a border. for example:
input[type="radio"]::checked + label::before {
/* styles will apply to label elements that immediately follow selected radio inputs */
}
First, the radio buttons from the same group shall have the same name.. Also why all buttons are checked?
To achieve what you want you can use event listeners. there are event listeners for every action and then you can change the DOM when the action happens.
So with the radio button you can create an event listener for "change" action.
$(document).ready(function(){
$('input[name="prsten-2-radio"]').change(function(){
// remove border from other cells
$('input[name="prsten-2-radio"]').parent().attr('style', 'none')
//put a border only to the selected
$(this).parent().attr('style', 'border: solid black')
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="crna">
<td>Crna</td>
<td class="no-value"></td>
<td>
<input id="r-band2-crna" value="0" type="radio" name="prsten-2-radio">
<label for="r-band2-crna">0</label>
</td>
<td>
<input id="r-band3-crna" value="0" type="radio" name="prsten-2-radio">
<label for="r-band3-crna">0</label>
</td>
<td>
<input id="r-multi-crna" value="1" type="radio" name="prsten-2-radio">
<label for="r-multi-crna">x10<sup>0</sup></label>
</td>
<td class="no-value"></td>
<td><input id="r-tcr-crna" value="250" type="radio" name="prsten-2-radio">
<label for="r-tcr-crna">±250</label>
</td>
</tr>
</table>
Here are some resources that might help you:
https://www.w3schools.com/jquery/jquery_selectors.asp
https://www.w3schools.com/jquery/jquery_events.asp
https://api.jquery.com/category/selectors/
https://api.jquery.com/category/events/
Good luck!
I'm trying to check a checkbox using <label> but by clicking a row / <tr> of <table>. Is this possible??
I have tried to use jQuery, but I'm not quite satisfied with the result, because, I'll eventually select the texts inside the row, which isn't very user friendly
I also have tried to test it in HTML on Chrome
<table border="1">
<label>
<!-- This label is expected to be used to check on the checkbox by
clicking anywhere on the table row -->
<tr>
<td><input type="checkbox" /> Foo</td>
<td>Bar</td>
</tr>
</label>
</table>
I expected when I click bar the checkbox would be checked, but it didn't
Note:
Since this is impossible to be aquired through basic HTML, I'm going to close this question
Please set label for attribute to do this, below code will help you.
<table border="1">
<tr>
<td><input type="checkbox" id="mycheckbox" /> Foo</td>
<td><label for="mycheckbox">Bar</label></td>
</tr>
</table>
$('.checkBoxChecked').on('click', function(){
var checkbox = $(this).find('.Aps_checkbox');
checkbox.prop("checked", !checkbox.prop("checked"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr class="checkBoxChecked">
<td><input type="checkbox" id="mycheckbox" class="Aps_checkbox"/> Foo</td>
<td>Bar</td>
</tr>
<tr class="checkBoxChecked">
<td><input type="checkbox" id="mycheckbox2" class="Aps_checkbox"/> Foo2</td>
<td>Bar2</td>
</tr>
</table>
<!-- begin snippet: js hide: false console: true babel: false -->
It's not possible to achieve this by basic HTML as of now...
Based on W3, it said that <label> can only affect on one level of container only
Something like this:
Legal:
<label>
<div> AAAA</div>
<input type="checkbox">
Some text
</label>
Illegal:
<label>
<div> AAAA
<input type="checkbox">
</div>
Some text
</label>
So since my question is involving more than one level of containers, It can't be achieved by normal means
Reference:
Mozila Web Reference
Multiple labels can be associated with the same form control.
Clicking on any of the labels associated with an input element toggles the checked state of that input element.
To check a checkbox by clicking a table row, you can create a table where the first td element of each table row contains an input element, and the subsequent td elements contain labels for that input element, like so:
<table>
<tr>
<td>
<input id="foo" type="checkbox" />
</td>
<td>
<label for="foo">Foo Label 1</label>
</td>
<td>
<label for="foo">Foo Label 2</label>
</td>
</tr>
<tr>
<td>
<input id="bar" type="checkbox" />
</td>
<td>
<label for="bar">Bar Label 1</label>
</td>
<td>
<label for="bar">Bar Label 2</label>
</td>
</tr>
</table>
To maximize the clickable area of each table row, you can make each label element fill the width of its parent td element like so:
table td label {
display: block;
}
I have a problem with aligning my labels and input fields in a form. Time and again I end up with something like this:
Which is produced with HTML like so:
...
<ul>
<li>
<label for="STREET">Street</label>
<input data-val="true" data-val-required="The Street field is required." id="STREET" name="STREET" type="text" value="P.O. Box 1053" />
</li>
<li>
<label for="SUITE">Suite</label>
<input id="SUITE" name="SUITE" type="text" value="" />
</li>
<li>
<label for="city">City</label>
<input data-val="true" data-val-required="The City field is required." id="city" name="city" type="text" value="Dalton" />
</li>
...
Naturally my issue is that the labels and the inputs don't line up, so the display is all jaggy, etc. I can personally think of many ways around this, using a table, setting a bunch of divs, and picking widths, etc. so that everything lines up properly.
It's not that these approaches don't work, but they don't seem to be more of a hack than a real solution, and then I end up having to manipulate the label widths if the label text / font changes, etc.
Is there an easier way to solve this type of problem, while preserving simple HTML / CSS or should I stick with the classic approach of hard coding widths, divs, using tables, etc ?
Here's an option
ul {
display: table;
}
li {
display: table-row;
}
label, input {
display: table-cell;
}
Of course you should adapt the css to your specific form, but this gives you table layout without sacrificing the markup. Here's a fiddle
it should be enough to set a width to the labels that is larger than the largest label-text
example css
label {
display:inline-block;
width:350px;
}
so all inputs would line up after 350px, is that your desired effect ?
http://jsfiddle.net/dKjpk/5/
Here is an option using floating inside the label if it's possible to give ul a fixed / relative width:
ul{
width:500px; // or 100%;
}
li{
width:100%;
display:block;
}
li{
list-style:none;
clear:both;
}
li label{
float:left;
}
li input{
float:right;
}
here's a fiddle
Arguably you could justify using a table here, since semantically you can consider that form to be tabular data.
Otherwise you need to either float the input elements right within their container so they are all flush, set a fixed width on the label elements, or use some kind of fluid grid to handle this (I usually use Foundation so I would use columns for this, with both label and input elements set to width: 100% within their fluid containers).
try it like this
by creating a table your things are in the same area beneath each other
<html>
<head>
<style>
label{
font-weight:bold;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td><label for="street">Street</label></td>
<td><input type="text" name="street"></td>
</tr>
<tr>
<td><label for="suite">Suite</label></td>
<td><input type="text" name="suite"></td>
</tr>
<tr>
<td><label for="city">City</label></td>
<td><input type="text" name="city"></td>
</tr>
<tr>
<td><label for="state_region">State or Region</label></td>
<td><select><option>Arizona</option></select></td>
</tr>
<tr>
<td><label for="pc">Postal Code</label></td>
<td><input type="text" name="pc"></td>
</tr>
<tr>
<td><label for="country">Country</label></td>
<td><select><option>USA</option></select></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td><label for="fax">Fax</label></td>
<td><input type="text" name="fax"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" name="email"></td>
</tr>
</table>
</form>
</body>
I have a basic CSS/html question about using html/CSS. I thought this was fairly basic and obvious, however it is not working as intended.
In this basic image, I would want the Labels to be to the right of Expertise
(creating a registration page where the user selects their Expertise)
I would believe this is basically
<tr>
<td>Expertise</td>
<input type="checkbox" style="vertical-align: left; margin: 12px;"> Label </input><br>
<input type="checkbox" style="vertical-align: left; margin: 12px;"> Label 2 </input>
</tr>
however this is not working as intended.
First of all your markup is invalid, table element can only have elements which are meant for table as their child elements i.e tbody, thead, th, tr, td etc, and no other elements, instead you can place those checkboxes inside td
Secondly input tag doesn't have any explicit closing tag, you need to self close it, else leave it without closing just like <br>
Third - Use label tag instead of having stray text besides checkbox
Demo
The right way
<table>
<tr>
<td class="valign">
Expertise
</td>
<td>
<input type="checkbox" style="vertical-align: left; margin: 12px;" />
<label>Label</label><br />
<input type="checkbox" style="vertical-align: left; margin: 12px;" />
<label>Labe2</label>
</td>
</tr>
</table>
CSS
.valign {
vertical-align: top;
}
Since you are already using tables, just place the input tags into another td tag like this:
<tr>
<td>Expertise</td>
<td>
<input type="checkbox" style="vertical-align: left; margin: 12px;"> Label </input><br>
<input type="checkbox" style="vertical-align: left; margin: 12px;"> Label 2 </input>
</td>
</tr>
This will make the checkboxes appear to the right of "Expertise".
I want to create a table where each td is a form field. What is the best way of approaching that? Should I create a regular table and apply css styles on the form fields to resemble the size of the td fields? Hmmm... what do you suggest?
You can place tags inside of a form easily, so I would recommend nesting a table in the form:
<form>
<table>
<tr>
<td>Name: <input type="text" name="name" /></td>
<td>Age: <input type="text" name="age" /></td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
Which would give you a one row, two column table with a labeled text box in each column. Be careful about nesting your HTML tags, this could get confusing fast if you made a large table/form.
One way is to use contenteditable
<html>
<table>
<tr>
<td>
<div contenteditable="true"></div>
</td>
</tr>
</table>
</html
People seem to be forgetting about display: table, display: table-row and display: table-cell!
Here's a demo jsFiddle.