I have a radio button in table and I want to implement select all functionality for radio button based on name. This is my code:
var checked = false;
$scope.acceptOrRejectAllOrders = function(selectedVal) {
if (selectedVal == 'Accept all') {
jQuery("#bundleAcceptAll").attr('checked', 'checked');
// $("#bundleAcceptAll").prop("checked", true);
//$("#bundleAcceptAll").attr('checked', 'checked');
var aa = document.getElementsByName("bundleAcceptAll");
for (var i = 0; i < aa.length; i++) {
document.getElementsByName(bundleAcceptAll).checked = true;
}
//$scope.quoteRequest.quotationRequestItems[0].quotes.length
} else {
}
};
<div style="border:1px #f5f4f4 solid;background: #f9f9f9;" ng-repeat="(key,quoteAndOrder) in getQuotesAndOrders()">
<div style="background: #fff;">
<table border="0" style="width: 100%;" class="table table-striped">
<thead>
<tr style="background: #ff7900;color: #fff;">
<th>Quote ID</th>
<th>{{key}}</th>
</tr>
<tr>
<th>Accept or Reject Orders:</th>
<th>
<span style="float: left;background: #f9f9f9;">
<input type="radio" name ="bundleAcceptAll" ng-change="" class="radioSignatory" value="Approve Order" ng-disabled="">
<p class="labelRadioSignatory">Approve Order</p>
<input type="radio" name ="bundleRejectAll" ng-change="" class="radioSignatory" value="Reject Order" ng-disabled="">
<p class="labelRadioSignatory">Reject Order</p>
</span>
</th>
</tr>
</thead>
<tr ng-repeat="odr in quoteAndOrder">
<td> {{odr.id}} </td>
<td>{{odr.status}}</td>
</tr>
</table>
<hr>
</div>
</div>
I am not able to select all radio buttons with name bundleAcceptAll. It is basically a list in which each row will have a radio button. I want all radio buttons in the list to be selected. Only one button gets selected
AFAIK if you choose radio button and use the same name it will treated as group that will only one item selected. Perhaps you could just change it into checkbox.
function oncheckClick()
{
$('input[name=chkBox]').prop('checked',true)
}
function onUnCheckClick()
{
$('input[name=chkBox]').prop('checked',false)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="chkBox">
<button id="check" onclick="oncheckClick()" value="Check">Check</button>
<button id="check" onclick="onUnCheckClick()" value="UnCheck">UnCheck</button>
if it is list, you can loop through the list and check or uncheck
$("input[type=radio][name='" + name + "']").each(function() {
//code here
});
As was mentioned above, it's not radio button functionality to have multiple items checked, it's checkboxes. But you can style checkboxes so they would look like radiobuttons. See for example: How to make a checkbox in circle shape with custom css?
Related
I display checkboxes in my table. Now when i check at least one checkbox, the icon must appear if not, it should be hidden. My icon is not hidden.
What am i doing wrong?
This is my code
<div class="row">
<div class="col-sm-12 ">
<a data-toggle="modal" id="btnAdd" data-target="#myModal" class="btn"> Add Items </a>
<i type="icon" class="fa fa-trash " ></i>
<div>
</div>
<table class="table" id="table">
<thead>
<tr>
<th><input type="checkbox" id="master"></th>
</tr>
</thead>
<tbody>
<td><input type="checkbox"></td>
//table data here
</tr>
#endforeach
</tbody>
</table>
var checkboxes = $("input[type='checkbox']"),
hideIcon = $("i[type='icon']");
checkboxes.click(function() {
hideIcon.attr("disabled", !checkboxes.is(":checked"));
});
You'll need to iterate through all your checkboxes on each click. Also, I would recommend using the prop function to check for the "checked" status. Then, to hide it, either use the hide function, or set the display property to hidden:
$("input[type='checkbox']").click(function() {
var atLeastOneChecked = false;
$("input[type='checkbox']").each(function(index) {
if ($(this).prop('checked'))
atLeastOneChecked = true;
});
if (atLeastOneChecked) {
$("i[type='icon']").show(); //built-in jquery function
//...or...
$("i[type='icon']").css('display','inline-block'); //or set style explicitly
} else {
$("i[type='icon']").hide(); //built-in jquery function
//...or...
$("i[type='icon']").css('display','none'); //set style explicitly
}
});
Starting off there is a append button that generates a row with 1 select box, 1 inputbox, and 4 checkboxes. The limit of adding this would be 1-10 rows at max. I have no idea how to make a jquery validation using for example http://formvalidation.io/ - or a standalone jquery code. The rules I would like to apply:
If the role chosen is user (not an admin) , I must validate that there is at least one checkbox checked and the user doesn't appears twice in the selections
The thing is I don't even know where to start from, can you point me any hints?
Live example :: http://jsfiddle.net/Yy2gB/131/
Append method onClick
$(document).ready(function(){
var obj = {"1":"Admin istrator","2":"User2"};
//$('.selectpicker').selectpicker();
$(".addCF").click(function(){
count = $('#customFields tr').length + 1;
var sel = $('<select name="user'+count+'">');
for(key in obj){
// The key is key
// The value is obj[key]
sel.append($("<option>").attr('value',key).text(obj[key]));
}
$('.selectpicker').selectpicker();
$("#customFields").append('<tr><td>'+sel[0].outerHTML
+'</td><td><input class="form-control" class="valid_role"'
+' data-fv-field="emails" type="text" name="role'+count
+'" /></td><td><input type="checkbox" class="mycheckbox"'
+' name="can_edit'+count+'"></td><td><input type="checkbox" '
+'class="mycheckbox" name="can_read'+count+'"></td><td><input '
+'type="checkbox" class="mycheckbox" name="can_execute'+count+'">'
+'</td><td><input type="checkbox" class="mycheckbox" '
+'name="is_admin'+count+'"></td><td><a href="javascript:void(0);"'
+'class="remCF">Remove</a></td></tr>');
$('.mycheckbox').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue'
});
$('.selectpicker').selectpicker();
});
$("#customFields").on('click','.remCF',function(){
$(this).parent().parent().remove();
});
});
HTML Form
<div class="col-md-12 col-lg-12">
<table class="table table-user-information" id="customFields">
<thead>
<tr>
<th class="standardTable_Header">User</th>
<th class="standardTable_Header">Role</th>
<th class="standardTable_Header">
<span title="administrator projektu">Can read</span>
</th>
<th class="standardTable_Header">
<span title="uprawnienie do edycji danych projektu">
edit
</span>
</th>
<th class="standardTable_Header">
<span title="uprawnienie do odczytu danych projektu oraz przypisanych do niego zadań">
excute
</span>
</th>
<th class="standardTable_Header">
<span title="uprawnienie do edycji danych projektu">
admin
</span>
</th>
</tr>
</thead>
<tbody>
<button type="button" class="btn btn-default addCF">
Append
</button>
</div>
</tbody>
</table>
Using this jQuery Validation Plugin and through this demo, We could do the following:
Assumption: Roles check boxes must have at least one checked if - and only if - the select tag have the value User2
1- wrap your table with form tag that has a submit button:
<div class="col-md-12 col-lg-12">
<form id="myform">
<table class="table table-user-information" id="customFields">
...
</table>
<input type="submit" value="submit" />
</form>
</div>
2- We need to edit the checkboxes html to make them all have the same name but with different values, for example:
<input type="checkbox" class="mycheckbox" name="ourRoles" value="can_edit' ...>
<input type="checkbox" class="mycheckbox" name="ourRoles" value="can_read' ...>
and so on.
3- Add the following script:
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("#myform").validate({
rules: {
ourRoles: {
required: function () {
if ($("select[name=user2]").val() == 2) {
return true;
} else {
return false;
}
}
}
}
});
See all together with this fiddle
I have table which consists of multiple rows and each row consists of Radio button in the first column as follows:
<table class="table table-condensed span8" id="AllocationTable">
<thead>
<tr>
<th title="Entity to Allocate" style="width: 30%">Entity</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.EntityAllocations)
{
<tr>
<td>
<input type="radio" name="radio" id="#item.ID" class="EntityRadioSelect" value="#item.ID" onclick="EntitySelect(this)" disabled="disabled" >
</td>
</tr>
}
</tbody>
</table>
Now I want to capture the Ids of the last clicked radio button
I have tried something like this
function EntitySelect(select) {
if ($(select).parent().data("lastClicked")){
alert($(select).parent().data("lastClicked"));
}
$(select).parent().data("lastClicked", select.id);
}
But I am getting the wrong value as it is giving me current value and sometime other values which is not accepted answer.
var clicked='';
var preClicked='';
$("#AllocationTable").on("click",".EntityRadioSelect",function(){
preClicked=clicked;
clicked=$(this).attr("id");
});
remove onclick="EntitySelect(this)"
try this:
function EntitySelect(select) {
var parent=$(select).parents('#AllocationTable');
if (parent.data("lastClicked")){
alert(parent.data("lastClicked"));
}
parent.data("lastClicked", select.id);
}
I want to be able to enter text in the lower text field, click Add to List and have it populate in the text area above. Then if you click the item in the text area you are given the option to remove it. So far I've been able to transfer the value of the text field into the text area but need help beyond that. A working demo can be found online HERE and a JS Fiddle that doesn't work for some reason (can someone tell me why it works locally and elsewhere) JS Fiddle link. This is what I have so far:
HTML:
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="2" valign="top">
Problem List:<BR />
<textarea rows="4" cols="50" id="ProbAreaTo" ></textarea><BR />
<button type="button" class="btn btn-default ">Delete Selected Problem</button>
</td>
</tr>
<tr>
<td colspan="2" valign="top"><p>To add a problem to the list, type it in the New Problem text field and then click "Add to List". To remove a problem, click it in the list, then click, "Delete Selected Problem"<P>
<strong>New Problem</strong><P>
<input type="text" id="ProbAreaFrom">
<P>
<button type="button" class="btn btn-default" id="ProbListBtn" onclick="ListProbs();">Add to List</button>
</p>
</td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT
function ListProbs() {
if (document.getElementById("ProbListBtn").onclick) {
var txt1 = document.getElementById("ProbAreaFrom").value;
ProbAreaTo.value = txt1;
}
}
Sorry but your working demo does not work correctly either. It can only add 1 item, adding a second will just overwrite the first.
Im sorry but a textarea is not the right way to go as you want the area you placed a textarea to be selectable only, not writeable and editable otherwise it voids the purpose of having to add items with a single line textbox.
I would suggest using a select box with a size of say 5 e.g.
<select id="selectbox" name="selectbox" size="5">
</select>
Then, set the css for the selectbox to have overflow:hidden; so it does not display the scroller (You can then set the overflow to auto if the selectbox length is > 5 in javascript)
In javascript on your add button, you can do this:
var x = document.getElementById("selectbox");
var txt1 = document.getElementById("ProbAreaFrom").value;
var option = document.createElement("option");
option.text = txt1
x.add(option);
This will take the textbox value and add it into the selectbox.
You can then easily code a selected item to be removed on the delete button call.
A select box is used to store and remove newly created elements. This code is complete from the example given above, it does remove the element from the select box and also clears the input text box after you click add. Here is a working JS FIDDLE
CSS
#sbox {
overflow: hidden;
width: 200px;
}
HTML
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="2" valign="top">
Problem List:<BR />
<select id="sbox" name="selectbox" size="5"></select>
<BR>
<button type="button" class="btn btn-default" onclick="DeleteProbs();">Delete
Selected Problem</button>
</td>
</tr>
<tr>
<td colspan="2" valign="top"><p>Instructions<P>
<strong>New Problem</strong><P>
<input type="text" id="ProbAreaFrom">
<P>
<button type="button" class="btn btn-default" id="ProbListBtn"
onclick="ListProbs();">Add to List</button>
</p>
</td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT
function ListProbs() {
var x = document.getElementById("sbox");
var txt1 = document.getElementById("ProbAreaFrom").value;
var option = document.createElement("option");
option.text = txt1
x.add(option);
ProbAreaFrom.value="";
}
function DeleteProbs() {
var x = document.getElementById("sbox");
for (var i = 0; i < x.options.length; i++) {
if (x.options[i].selected) {
x.options[i].remove();
}
}
}
I have a table with different places, and implemented some simple buttons that allow you to filter the list. First filter is location (north, east, central, south, west) which is based on postcode. Another filter is on "impress". This shows you only the places that have have 4 or higher value in the column. Filters work great separately, but not together. The result that I am after is when I press "West" is shows me the places in "West, when I then click impress, I expect to see the places in west with a 4 or 5 score for impress.
JSFiddle here
$('.table td.postcode').each(function() {
var cellText = $(this).html();
var locationString = cellText.substring(0,2);
if (locationString.indexOf('W') > -1){
$(this).parent().addClass('west');
}
if (locationString.indexOf('C') > -1){
$(this).parent().addClass('central');
}
if (locationString.indexOf('E') > -1){
$(this).parent().addClass('east');
}
if (locationString.indexOf('S') > -1){
$(this).parent().addClass('south');
}
if (locationString.indexOf('N') > -1){
$(this).parent().addClass('north');
}
});
$("input[name='filterStatus'], select.filter").change(function () {
var classes = [];
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.'+$(this).val());
}
});
if (classes == "") {
// if no filters selected, show all items
$("#StatusTable tbody tr").show();
} else {
// otherwise, hide everything...
$("#StatusTable tbody tr").hide();
// then show only the matching items
rows = $("#StatusTable tr").filter(classes.length ? classes.join(',') : '*');
if (rows.size() > 0) {
rows.show();
}
}
});
$("input[name='impressStatus']").change(function(){
var classes = [];
$("input[name='impressStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.'+$(this).val());
}
});
if(classes == ""){
$("#StatusTable tbody tr").show();
}
else{
$(".table td.impress").each(function(){
if($(this).data("impress") >= 4){
$(this).parent().show();
}
else{
$(this).parent().hide();
}
});
}
});
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--BUTTON FILTERS -->
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" style="" data-toggle="buttons">
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="north" autocomplete="off">North
</label>
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="east" autocomplete="off" class="radio">East
</label>
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="central" autocomplete="off" class="radio">Central
</label>
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="south"autocomplete="off" class="radio">South </label>
<label class="btn btn-primary outline">
<input type="checkbox" name="filterStatus" value="west" autocomplete="off" class="radio">West
</label>
</div><!-- button group -->
<label class="btn btn-primary outline">
<input type="checkbox" name="impressStatus" class="radio" aria-pressed="true" autocomplete="off">Impress her
</label>
</div><!-- btn toolbar-->
<!--TABLE -->
<table class="table" id="StatusTable">
<thead>
<tr>
<th data-sort="string" style="cursor:pointer">name</th>
<!-- <th>Description</th> -->
<th data-sort="string" style="cursor:pointer;">postcode</th>
<th data-sort="int" style="cursor:pointer;">price</th>
<th data-sort="int" style="cursor:pointer;">total</th>
<th data-sort="int" style="cursor:pointer;">impress</th>
<th colspan="4"></th>
</tr>
</thead>
<tbody>
<tr data-link="/places/1">
<td>Name of place 1</td>
<td class="postcode">NW1</td>
<td class="price" data-price='3'>3</td>
<td class="rating" data-rating='69'>69</td>
<td class="impress" data-impress='4'>4</td>
</tr>
<tr data-link="/places/2">
<td>Name of place 2</td>
<td class="postcode">E3</td>
<td class="price" data-price='4'>4</span></td>
<td class="rating" data-rating='89'>89</td>
<td class="impress" data-impress='5'>5</td>
</tr>
<tr data-link="/places/3">
<td>Name of place 3</td>
<td class="postcode">SW3</td>
<td class="price" data-price='2'>2</td>
<td class="rating" data-rating='51'>51</td>
<td class="impress" data-impress='3'>3</td>
</tr>
</tbody>
</table>
Code is probably not the most efficient, but it works :). Once I got this working, I want to add more filters.
(sorry for my bad english)
if these are the only filters you need, you can use two different type of filter:
hide via Javascript
hide via Css
if you use 2 types of filters the filters can work correctly without use a complex javascript code to manage a big number of different cases and combination:
I add a initial (on document load) control that check if a tr has the value impress cell >4, if has it add a new class: is_impress else add an other: no_impress.
$('.table td.impress').each(function(){
var _class = ($(this).data("impress") >= 4) ? "is_impress" : "no_impress";
$(this).parent().addClass(_class);
});
The code of filter by position is the same... but... I edit the filter by impress to add a class to table () when is active and take it off when isn't:
$("input[name='impressStatus']").change(function(){
(!$(this).is(":checked"))
? $("#StatusTable").removeClass("active_impress")
: $("#StatusTable").addClass("active_impress");
});
if the table has the class active_impress a css rules override the inline code of dispaly to hide all the row that haven't an impress >4:
#StatusTable.active_impress tr.no_impress{
display:none !important;
}
This type of filter override any other display modification until the checkbox stay checked.
I edit your fiddle:
https://jsfiddle.net/Frogmouth/gkba343L/1/
USE CSS to more filter
First change on load check, add price:
$('.table tbody tr').each(function(){
var _class = "";
_class += ($(this).find(".price").data("price") >= 2) ? "is_price " : "no_price ";
_class += ($(this).find(".impress").data("impress") >= 4) ? "is_impress " : "no_impress ";
console.log(_class);
$(this).addClass(_class);
});
Add an other handler to new filter:
$("input[name='priceStatus']").change(function(){
(!$(this).is(":checked"))
? $("#StatusTable").removeClass("active_price")
: $("#StatusTable").addClass("active_price");
});
add new selector to the css rule:
#StatusTable.active_impress tr.no_impress,
#StatusTable.active_price tr.no_price{
display:none !important;
}
This is the result:
https://jsfiddle.net/Frogmouth/gkba343L/3/
Optimize code to add more filter:
HTML filter button:
<label class="btn btn-primary outline">
<input type="checkbox" name="impress" class="cssFilter radio" aria-pressed="true" autocomplete="off">Impress her
</label>
use cssFilter to indicate that is a css filter button and use name attribute to define the name of the filter, than use this namespace into the css class:
.active_{name} .no_{name} .is_{name}
And use a generic handler:
$("input.cssFilter").change(function(){
var _name = $(this).attr("name");
console.log(_name);
(!$(this).is(":checked"))
? $("#StatusTable").removeClass("active_"+_name)
: $("#StatusTable").addClass("active_"+_name);
});
With this you can manage all the filter with an unique handler, remember to add the filter to onload check and the new selector for each new filter.
Fiddle:
https://jsfiddle.net/Frogmouth/gkba343L/4/