I have a View as below
#using (Html.BeginForm("SubmitSelected", "Costumer", FormMethod.Post, new { id = "form-Costumer", enctype = "multipart/form-data", name = "myform" }))
{
<input type="checkbox" id="checkall" /><span>Check All</span>
<div id="checkboxes">
<table class="table table-bordered">
<thead>
<tr>
<th>
Select //this is from the class where datatype is bool
</th>
<th>
ContactNumber
</th>
<th>
ConsumerName
</th>
</tr>
</thead>
#Html.EditorFor(model => model.transaksiSelectionViewModel.Transactions)
</table>
</div>
<div class="form-group">
#Html.Label("Total Checked")
<div class="col-sm-10">
<input type="text" id="total" class="form-control" />//the result of the number checked here
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
function toggleChecked(status) {
$("#checkboxes input").each(function () {
// Set the checked status of each to match the
// checked status of the check all checkbox:
$(this).prop("checked", status);
});
}
$(document).ready(function () {
//Set the default value of the global checkbox to true:
$("#checkall").prop('checked', false);
// Attach the call to toggleChecked to the
// click event of the global checkbox:
$("#checkall").click(function () {
var status = $("#checkall").prop('checked');
toggleChecked(status);
});
});
</script>
}
The script above only runs to check all checkboxes on each row.
and I want to create a function to calculate the number of checkboxes that have been checked, the results are in the textbox(Total Checked).
I tried but it didn't work. Please help:)
You can use this when trigger function go on.
var checkedCount = $("[type='checkbox']:checked").lenght
use this on your document.ready function..
var checkednum = $('input:checkbox:checked').length;
alert(checkednum)
Related
I have a view like below
<input type="checkbox" id="checkall" name="check_all"/><span>Check All</span>
<table class="table">
<tr>
<th>Selected</th>
<th>Name</th>
</tr>
#foreach (School.Data.ViewModels.Student item in Model.StudentDetails)
{
<tr>
<th>#Html.CheckBoxFor(modelitem => item.IsChecked, new { #onclick = "studentChecked(this);", #name="checked1", #class="idrow" }) </th>
<th> #Html.DisplayFor(modelitem => item.Name)</th>
</tr>
}
</table>
<script>
$(document).on(' change', 'input[name="check_all"]', function () {
$('.idRow').prop("checked1", this.checked);
});
</script>
I have one checkbox by the name "check_all". When I select this checkbox all checkboxes in the table must be selected. How can I do this?.
I have seen this page http://jsfiddle.net/GW64e/, but still didn't work. please help :)
Below code will check all the checkbox
$("#checkall").click(function () {
$(".idrow").attr('checked', this.checked);
});
Below code will uncheck and check 'check all' checkbox based on selection
$(".idrow").click(function() {
if (!this.checked) {
$("#checkall").attr('checked', false);
}
else if ($(".idrow").length == $(".idrow:checked").length) {
$("#checkall").attr('checked', true);
}
});
I wanted to create a simple html select-all checkbox for my table form. So when we click on top of corresponding column list all the elements in the column are selected without checking other columns.
Here is what i tried..
<form name="checkn" id="frm1" class="form1" method="post">
<table class="table" cellspacing="10" border="1" style="width:100%;">
<thead>
<tr>
<th>Products List</th>
<th>
Product Available
<input type='checkbox' name='checkall' onclick='checkAll(frm1);'>
</th>
<th>
Description
<input type='checkbox' name='checkall' onclick='checkdAll(frm2);'>
</th>
</tr>
</thead>
<tbody>
<?php
//fetch data php code
?>
<tr> <td width="20%;"> <h3> <?=$products?> </h3> </td>
<td width="20%;"> <input id="frm1" type="checkbox" name="product1" value='<?=$fieldname?>' > Product Available </td>
<td width="20%;"> <input id="frm2" type="checkbox" name="product2"> Description </td>
</tr>
<button type="submit" name="submit" style="position:absolute; bottom:0;"> Submit </button>
<script type="text/javascript">
checked = false;
function checkAll (frm1)
{
var aa= document.getElementById('frm1'); if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
</script>
<script type="text/javascript">
checked = false;
function checkdAll (frm2)
{
var aa= document.getElementById('frm2'); if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
</script>
</tbody>
</table>
</form>
Please help me
I think you need to find all tr length then find td with input. after that, you can check all. Like this here is my code. I hope it helps you.
$('#IsSelectAll').on('change', function () {
if ($(this).is(':checked')) {
$('#tbCustomerList tbody tr:visible').filter(function () {
$(this).find('td:eq(1)').children('label').children('input[type=checkbox]').prop('checked', true);
});
}
else {
$('#tbCustomerList tbody tr:visible').filter(function () {
$(this).find('td:eq(1)').children('label').children('input[type=checkbox]').prop('checked', false);
});
}
});
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'm a little stuck, can't get my head around this problem. I have setup some jQuery that identifies the values in radio inputs, which align with values within the table. This is the start to doing some filtering on a table.
I want the following three things to happen:
Whenever you click on a filter and the cell has the same value, it's row gets highlighted
Whenever you check that option off, it gets removed
If the page loads and an option is already checked, the row gets highlighted on load
jQuery Code:
$(function () {
// On Change of Radio Buttons
$('input').on('change', function () {
var filter = $('input:checkbox[name=filter]:checked').val();
// Edit the Rows
$(".gameStatus").filter(function () {
return $(this).text() == filter;
}).parent('tr').addClass('filtered');
});
});
jsfiddle:
http://jsfiddle.net/darcyvoutt/8xgd51mg/
$(function () {
var filters = [];
var edit_rows = function () {
filters = [];
$('input:checkbox[name=filter]:checked').each(function () {
filters.push(this.value);
});
// Edit the Rows
$(".gameStatus").each(function () {
$(this).parent('tr')
.toggleClass('filtered',
filters.indexOf($(this).text()) > -1
);
});
}
edit_rows();
// On Change of Radio Buttons
$('input').on('change', edit_rows);
});
jsfiddle
edit: added functionality so it gets invoked on page load
Here's alternate solution ...
$(function () {
function highlight() {
var filter = $(this).val();
var checked = this.checked;
// Edit the Rows
var affectedRows = $(".gameStatus").filter(function () {
return $(this).text() == filter;
});
if (checked) {
affectedRows.parent('tr').addClass('filtered');
} else {
affectedRows.parent('tr').removeClass('filtered');
}
}
$('input').each(highlight);
// On Change of Radio Buttons
$('input').on('change', highlight);
});
.filtered {
background: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="filters">
<input type="checkbox" name="filter" id="draft" value="Draft" checked />
<label for="draft">Draft</label>
<input type="checkbox" name="filter" id="active" value="Active" />
<label for="active">Active</label>
<input type="checkbox" name="filter" id="complete" value="Complete" />
<label for="complete">Complete</label>
<input type="checkbox" name="filter" id="acrhived" value="Archived" />
<label for="acrhived">Archived</label>
</div>
<table id="userManager">
<tbody>
<tr>
<th>Game</th>
<th>Teams</th>
<th>Status</th>
</tr>
<tr>
<td>Another Game</td>
<td>New Team, Project Lucrum</td>
<td class="gameStatus">Active</td>
</tr>
<tr>
<td>New Game</td>
<td>No teams selected</td>
<td class="gameStatus">Draft</td>
</tr>
<tr>
<td>New Game</td>
<td>New Team, Just in Case</td>
<td class="gameStatus">Active</td>
</tr>
</tbody>
</table>
<div class="test"></div>
</div>
try this. :)
$(function () {
var highlight = function(el){
if(el.is(':checked')){
$(".gameStatus:contains("+el.val()+")")
.parent('tr').addClass('filtered');
}else{
$(".gameStatus:contains("+el.val()+")")
.parent('tr').removeClass('filtered');
}
}
//On Load
highlight($('input[type="checkbox"][name=filter]:checked'));
// On Change of Radio Buttons
$('input').on('change', function () {
highlight($(this));
});
});
I implement table with paging.
Here the code to create table:
<table id="ContactsTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>
#Html.CheckBox("chkBoxAllEmails", new { onclick = "SelectAllEmails(this);" })
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Email
</th>
</tr>
</thead>
#foreach (UserContact item in ViewBag.Contacts)
{
<tr>
<td>
<input id = "#(("chkbox" + index++).ToString())" name="chboxEmail" type="checkbox" value = "#item.email" onclick="SelectEmail(this); " />
</td>
<td>
#item.firstName
</td>
<td>
#item.lastName
</td>
<td>
#item.email
</td>
</tr>
}
</table>
Here is the code that create paging in the table:
<script>
$(document).ready(function () {
$('#ContactsTable').dataTable();
});
</script>
And here is how this table looks:
As you can see table contain checkbox column. When I check the header of the checkbox column
all the checkbox have to be selected.Here is the JS code that implements it:
function SelectAllEmails(chboxSelectAllElements) {
var chboxEmailsArray = document.getElementsByName("chboxEmail");
if (chboxSelectAllElements.checked) {
for (var i = 0; i < chboxEmailsArray.length; i++) {
chboxEmailsArray[i].checked = true;
}
}
else {
for (var i = 0; i < chboxEmailsArray.length; i++) {
chboxEmailsArray[i].checked = false;
}
}
}
And here is how it's looks after I check the header of the checkbox:
But when I select second page in paging, turn out that the checkboxes not checked:
i.e checkboxes will only work on current pagination page.
My question is why not all checkboxes selected?
I need to check or uncheck all checkboxes when the checkbox in the header checked or unchecked , any idea or examples how can I implement it in my example?
Thank you in advance.
Use on :
$(document).on('change', 'input[name="chboxEmail"]', function(e) {
$('input:checkbox').not(this).prop('checked', this.checked);
});
Than use the .on() method to delegate the click event to future elements added to the DOM