How to style radio button or checkbox inside a bootstrap table?
Here's an example of styled radio buttons inside a Bootstrap Table. You can easily remove the JS snippets along with some CSS to make the Radio Buttons the only Clickable Element if that's the preferred option.
Font Awesome is used for the Radio Buttons so be sure to include it.
input[type=radio] {
display: none;
}
label {
cursor: pointer;
}
input[type=radio] + label:before {
font-family:'FontAwesome';
display: inline-block;
}
input[type=radio] + label:before {
content:"\f10c";
color: #f00;
cursor: pointer;
}
input[type=radio] + label:before {
letter-spacing: 10px;
}
input[type=radio]:checked + label:before {
content:"\f111";
color: #fff; /* Remove this if you remove the 3 Last Rules of the CSS */
}
Snippet
/* Delete the JS Below to Remove the Hover Effect and to Make the Buttons + Label the only Active Area */
$('.table tr').click(function(event) { if (event.target.type !== 'radio') { $(':radio', this).trigger('click'); }});
$(":radio[name=radios]").change(function() { $(".table tr.active").removeClass("active"); $(this).closest("tr").addClass("active");});.wrapper { margin-top: 40px;}.table-striped { background-color: rgba(77, 162, 179, 0.35); color: #4DA2B3;}.table-responsive { border-color: transparent; font-size: 20px; cursor: pointer; /* Remove this if you remove the 3 Last Rules Rules of the CSS */}.table tbody tr td { line-height: 24px; padding-top: 12px;}input[type=radio] { display: none;}label { cursor: pointer;}input[type=radio] + label:before { font-family: 'FontAwesome'; display: inline-block; font-size: 20px; font-weight: 200;}input[type=radio] + label:before { content: "\f10c"; /* The Open Circle Can be replaced with another Font Awesome Icon */ color: #4DA2B3; cursor: pointer;}input[type=radio] + label:before { letter-spacing: 10px;}input[type=radio]:checked + label:before { content: "\f05d"; /* Replace with f111 for a Solid Circle (or any other Font Awesome Icon */ color: #fff; /* Remove this if you remove the 3 Last Rules of the CSS */}/* Delete the Rules Below (and 2 above with Comments) to Remove the Hover Effect and to Make the Buttons + Label the only Active Area */
.table tbody tr:hover td { background-color: rgba(77, 162, 179, 0.55); color: #fff; border-bottom: 10px solid rgba(7, 101, 120, 0.85);}.table tbody tr.active td { background-color: rgba(77, 162, 179, 0.55); color: #fff;}.table tbody tr.active td label { color: #fff;}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /><div class="wrapper"> <div class="container"> <div class="table-responsive col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> <table class="table table-striped"> <tbody> <tr> <td>Series A</td> <td>Product A</td> <td> <input type="radio" name="radios" id="radio1" /> <label for="radio1">Yes</label> </td> </tr> <tr> <td>Series B</td> <td>Product B</td> <td> <input type="radio" name="radios" id="radio2" /> <label for="radio2">No</label> </td> </tr> <tr> <td>Series C</td> <td>Product C</td> <td> <input type="radio" name="radios" id="radio3" /> <label for="radio3">Maybe</label> </td> </tr> </tbody> </table> </div> </div></div>Make Checkboxes behave like radio buttons for each table row independently
EDIT: Use siblings() as suggested by @Juan Castillo
When you uncheck the other boxes, limit your search to the siblings (HTML elements that share a direct parent element) of the checkbox that was changed. Also, get rid of $(".chb").prop('checked', false); and $(this).prop('checked', true); The first line will uncheck every the box every time (not what you want) and the second line means you can't click on a box to uncheck it manually (seems unintentional).
$(".chb").change(function() { $(this).siblings().prop('checked', false);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="dtBasicExample"> <thead> <tr> <th>Aceptation</th> </tr> </thead> <tbody> <tr> <td> <input type='checkbox' class='chb' name='Total' value='Total'>Total<br> <input type='checkbox' class='chb' name='Parcial' value='Partial'>Partial<br> <input type='checkbox' class='chb' name='Rechazo' value='Reject'>Reject </td> </tr> <tr> <td> <input type='checkbox' class='chb' name='Total' value='Total'>Total<br> <input type='checkbox' class='chb' name='Parcial' value='Partial'>Partial<br> <input type='checkbox' class='chb' name='Rechazo' value='Reject'>Reject </td> </tr> <tr> <td> <input type='checkbox' class='chb' name='Total' value='Total'>Total<br> <input type='checkbox' class='chb' name='Parcial' value='Partial'>Partial<br> <input type='checkbox' class='chb' name='Rechazo' value='Reject'>Reject </td> </tr> </tbody> <tfoot> </tfoot></table>Radio button inside table
This can be accomplished using label for
See the following code and run the snippet below ::
<table class="table table-responsive">
<thead>
<tr>
<th>Courier</th>
<th>Service</th>
</tr>
</thead>
<tbody>
<form>
<tr>
<td>
<div class="radio">
<label><input type="radio" id='regular' name="optradio">TIKI</label>
</div>
</td>
<td>
<div class="radiotext">
<label for='regular'>Regular Shipping</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="radio">
<label><input type="radio" id='express' name="optradio">JNE</label>
</div>
</td>
<td>
<div class="radiotext">
<label for='express'>Express Shipping</label>
</div>
</td>
</tr>
</form>
</tbody>
</table>Format column with checkboxes in bootstrap-table
Looks like this condition isn't handled in the bootstrap-table library.
Issue : calculateObjectValue function is returning expected result but append logic is missed out for both checkbox and radio button (that's why you are not seeing the star icon in checkbox field).
In Code
value = calculateObjectValue(column,
that.header.formatters[j], [value, item, i], value);
getting expected value. following code is not appending the value.
text = [that.options.cardView ?
'<div class="card-view">' : '<td class="bs-checkbox">',
'<input' +
sprintf(' data-index="%s"', i) +
sprintf(' name="%s"', that.options.selectItemName) +
sprintf(' type="%s"', type) +
sprintf(' value="%s"', item[that.options.idField]) +
sprintf(' checked="%s"', value === true ||
(value && value.checked) ? 'checked' : undefined) +
sprintf(' disabled="%s"', !column.checkboxEnabled ||
(value && value.disabled) ? 'disabled' : undefined) +
' />',
that.options.cardView ? '</div>' : '</td>'
].join('');
so replaced with the below code with a conditional check if the column has formatter then it will append the value.
text = [that.options.cardView ?
'<div class="card-view">' : '<td class="bs-checkbox">',
'<input' +
sprintf(' data-index="%s"', i) +
sprintf(' name="%s"', that.options.selectItemName) +
sprintf(' type="%s"', type) +
sprintf(' value="%s"', item[that.options.idField]),
column.formatter === undefined ?
sprintf(' checked="%s"', value === true ||
(value && value.checked) ? 'checked' : undefined) +
sprintf(' disabled="%s"', !column.checkboxEnabled ||
(value && value.disabled) ? 'disabled' : undefined) +
' />': ' />' + value,
that.options.cardView ? '</div>' : '</td>'
].join('');
so created pull-request, let see what author says.
radio button.checkbox not visible inside table in materialize css
As in F12 opacity:0 what means your radio is invisible:
As materialize doc you have to use radio as below with class="with-gap":
<p>
<label>
<input class="with-gap" name="yourName" type="radio"/>
<span>yout text</span>
</label>
</p>
See working code
<html>
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </head>
<body> <table> <thead> <th>radio button</thead> <tbody> <tr> <td> <p> <label> <input class="with-gap" name="group3" type="radio" /> <span>Red</span> </label> </p> </td> </tr> </tbody> </table> </body>
</html>how to check a radio button by clicking on a table row?
You can do this easily by just using the current this context like:
const rb = this.querySelector('input[name="choice"]');
rb.checked = true;
Working Demo:
var elements = document.getElementsByTagName('tr');for (var i = 0; i < elements.length; i++) {
(elements)[i].addEventListener("click", function() { const rb = this.querySelector('input[name="choice"]'); rb.checked = true;
let selectedValue = rb.value; alert(selectedValue); });}tr:hover { background-color: gray; cursor: pointer;}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><table class="table table-bordered"> <thead> <tr> <th></th> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td><input type="radio" value="Jhon doe" name="choice" /></td> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td><input type="radio" value="mary Moe" name="choice" /></td> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td><input type="radio" value="July dooley" name="choice" /></td> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody></table>Related Topics
How to Set a Floating Div's Width to Take Up Remaining Space Without Pushing Other Divs Down
Did Chrome 72 Break 'Data:Image/Svg+Xml;Utf8' for CSS Background Svgs
Cache Busting Images Which Are Linked Inside SASS Files
Animating Elements Sequentially in Pure CSS3 on Loop
Flex: Justify-Content: Space-Around But Full Size on Both Ends
Is There Something "Like" CSS Built into Xsl-Fo
Bootstrap 4 Center Pagination in Column
An Alternative to -Webkit-Transform: Transformy
Is There an Inverse to The CSS "Clip" Property; Hide The Clipped Area
Overriding CSS Properties That Don't Have Default Values
How to Set Different Font-Weight for Fallback Font
Diamond Menu Items Using CSS and Svg
Mvc Bundling and Relative CSS Image When Website Is Deployed to an Application
Media Query About Screen Size Instead of Resolution