jquery - limiting toggleClass to 2 elements - javascript

<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
$(this).toggleClass('newclass');
});
});
</script>
This function changes the class of the selected column in my table. It works fine.
However it should not allow more than 2 columns being selected at once (by selected I mean the column having the new class toggled - newclass). So it simply should not react if other columns are clicked.
How would I do this? I could count how many columns currently use newclass and if it's 2 then cancel the function. I'm not sure how to count them or if this is the best way to do it.

here's one way to ensure no more than 2
jsfiddle
$('#mytable td').click(function() {
var $this = $(this);
// toggle 'on' if
// 1. it doesn't already have the class and
// 2. and there are less than two set to .newclass
// toggle 'off' if
// 1. it already has the class and
// 2. and there are less than two set to .newclass
$this.toggleClass('newclass',
!$this.hasClass('newclass') &&
$('#mytable .newclass').length < 2);
})

The size() method shows you how many other elements match that selector, so you can test against that before applying toggleClass():
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if ($("#mytable td.newclass").size() < 2)
{
$(this).toggleClass('newclass');
}
});
});
</script>

Try using the length property like this:
<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if ($('#mytable td.newclass').length < 2)){
$(this).toggleClass('newclass');
}
});
});
</script>
Hope this helps!

<script type="text/javascript">
$(document).ready(function () {
$('#mytable td').click(function () {
if(!$(this).hasClass('newClass')){
if($("td.newClass").size() < 2){
$(this).toggleClass('newclass');
}
}
else {
$(this).toggleClass('newclass');
}
});
});
</script>

Related

How to duplicate div class color

I'm trying to make it comments counter div. If comments as 0 div class is red or more than 0 div class is blue, but javascript duplicating same colors.
$(function () {
if(parseInt($(".notification-counter").text()) > 0) {
//$(".notification-counter").hide();
$('.notification-container').addClass('notification-container2');
}
});
jsfiddle: http://jsfiddle.net/783h57zy/10/
thanks for answers!
You need to iterate over the divs using .each() and $(this):
$(function () {
$('.notification-container').each(function () {
if (parseInt($(this).text()) > 0) {
$(this).addClass('notification-container2');
}
})
});
jsFiddle example
$(function () {
$('.notification-counter')
.filter(function() {
return $(this).text() > 0;
}).parents('.notification-container')
.addClass('notification-container2');
});
jsfiddle
You need to iterate on the elements and then update the class.
You need to update your code to
$(function () {
$(".notification-counter").each(function(){
if(parseInt($(this).text()) > 0) {
//$(".notification-counter").hide();
$(this).parent().addClass('notification-container2');
}
});
});
Here is the updated fiddle - http://jsfiddle.net/783h57zy/12/
You need to loop through your divs and check them separately:
$.each: loop through divs
'.parent()': get the container div
$(this): use the current object
$(function () {
$('.notification-counter').each(function () {
if (parseInt($(this).text()) > 0) {
$(this).parent().removeClass('notification-container').addClass('notification-container2');
} else {
$(this).parent().removeClass('notification-container2').addClass('notification-container');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notification-container">
<div class="notification-counter">200</div>
</div>
<div class="notification-container">
<div class="notification-counter">0</div>
</div>
Since there are many instances of the same class on the page, you need to run through each instance and make the decision based on each element.
$(function () {
$('.notification-counter').each(function(){
if( parseInt($(this).html()) === 0 ) {
$(this).addClass('notification-container2');
}
});
});
Updated: http://jsfiddle.net/783h57zy/14/

limit checked checkboxes jquery ui easely

Just simply want to limit the number of checkboxes, but actualy my code desallow all checkbox when lengh > 3 , whats wrong..
http://jsfiddle.net/mbAwC/11/
$('.limit :checkbox').change(function () {
var $cs=$(this).closest('.limit').find(':checkbox:checked');
if ($cs.length > 3) {
this.checked=false;$('.limit :checkbox').removeAttr('checked').button( "refresh" );
}
});
regards
Jess
Just remove removeAttr('checked')
$(function() {
$(".limit").buttonset();
$('.limit :checkbox').change(function () {
var $cs=$(this).closest('.limit').find(':checkbox:checked');
if ($cs.length > 3) {
this.checked=false;
$('.limit :checkbox').button( "refresh" );
}
});
});
JSFiddle
$('.limit :checkbox').removeAttr('checked') is wrong. It will uncheck all your checkboxes.
Perhaps you meant $(this).removeAttr('checked') (but you already have this.checked=false)?
Set checked to false, then call button('refresh'):
$(this).prop('checked', false).button('refresh');
Here's a fiddle
Try this way:
$(function () {
$(".limit").buttonset();
var max = 3;
var checkboxes = $('input[type="checkbox"]', '.limit');
checkboxes.change(function () {
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max).button('refresh');
});
});
Demo: http://jsfiddle.net/mbAwC/21/

Loop over html table and get checked checkboxes (JQuery)

I have an HTML table with a checkbox in each row.
I want to loop over the table and see if there are any checkboxes that are checked.
The following does not work:
$("#save").click( function() {
$('#mytable tr').each(function (i, row) {
var $actualrow = $(row);
checkbox = $actualrow.find('input:checked');
console.log($checkbox);
});
This prints in the console the following:
[prevObject: jQuery.fn.jQuery.init[1], context: tr, selector: "input:checked", constructor: function, init: function…]
per row regardless of whether any checkbox is checked.
Update
Same issue with:
$('#mytable tr').each(function (i, row) {
var $actualrow = $(row);
$checkbox = $actualrow.find(':checkbox:checked');
console.log($checkbox);
});
Use this instead:
$('#save').click(function () {
$('#mytable').find('input[type="checkbox"]:checked') //...
});
Let me explain you what the selector does:
input[type="checkbox"] means that this will match each <input /> with type attribute type equals to checkbox
After that: :checked will match all checked checkboxes.
You can loop over these checkboxes with:
$('#save').click(function () {
$('#mytable').find('input[type="checkbox"]:checked').each(function () {
//this is the current checkbox
});
});
Here is demo in JSFiddle.
And here is a demo which solves exactly your problem http://jsfiddle.net/DuE8K/1/.
$('#save').click(function () {
$('#mytable').find('tr').each(function () {
var row = $(this);
if (row.find('input[type="checkbox"]').is(':checked') &&
row.find('textarea').val().length <= 0) {
alert('You must fill the text area!');
}
});
});
use .filter(':has(:checkbox:checked)' ie:
$('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
$('#out').append(this.id);
});
The following code snippet enables/disables a button depending on whether at least one checkbox on the page has been checked.
$('input[type=checkbox]').change(function () {
$('#test > tbody tr').each(function () {
if ($('input[type=checkbox]').is(':checked')) {
$('#btnexcellSelect').removeAttr('disabled');
} else {
$('#btnexcellSelect').attr('disabled', 'disabled');
}
if ($(this).is(':checked')){
console.log( $(this).attr('id'));
}else{
console.log($(this).attr('id'));
}
});
});
Here is demo in JSFiddle.

Getting a table row cell value when a specific column is is clicked

I was able to retrieve all row values via table click event and getting its value via event.currentTarget.cells[4].innerText();.
But i would like to apply this if a specific column is clicked only like, when i clicked an ID 21 under Username column. It should alert all the cell values of the row. And then when I clicked the other columns it should not alert.
This is my code. Please inform me if you are having problems the way I ask.
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
alert(event.currentTarget.cells[0].innerText);
alert(event.currentTarget.cells[1].innerText);
alert(event.currentTarget.cells[2].innerText);
alert(event.currentTarget.cells[3].innerText);
alert(event.currentTarget.cells[4].innerText);
});
});
</script>
Here is my HTML http://jsfiddle.net/jE5UM/
Try
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
$(this).children().each(function(){
alert($(this).text())
})
});
});
Demo: Fiddle
If you want an array as the result then
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
var texts = $(this).children().map(function(){
return $.trim($(this).html())
}).get();
});
});
Demo: Fiddle
Update
$(document).ready(function () {
$('#tableid').on('click', 'tr td:nth-child(2)', function (event) {
var texts = $(this).closest('td').siblings().addBack().map(function(){
return $.trim($(this).html())
}).get();
alert(texts.join())
});
});
Demo: Fiddle
I'd suggest, in the absence of specific HTML and other information:
$(document).ready(function () {
$('#tableid').on('click', 'tr', function (event) {
var cell = event.target,
values = $(cell).siblings().addBack().map(function(){
return $(this).text();
}).get();
alert(values);
});
});
JS Fiddle demo.
References:
addBack().
get().
map().
on().
siblings().
text().

How to make more than one div appear using jQuery

I feel I am very close to finishing this. I have a form with an "Add Children" button that when pressed will make a div show. The form has 15 divs hidden (#child1 - #child15). I have it working to show only the first row (#child1).
My problem is that when the button is pressed again, the next row (#child2, #child3, etc...) should appear and I am not sure how to get it to show. I tried putting in the counter but I am new to jQuery and any help would be very much appreciated. I don't expect this to be a difficult issue, just one that is eluding my novice ability.
Here is the jQuery. If i need to edit or add more code to help the question please let me know. Thanks in advance!
<script type="text/javascript">
var counter=0
$(document).ready(function() {
$('#addChildren').click(function() {
$('#child1').show(function() {
counter++
});
});
});
</script>
Add a class children-to-show to your divs #child1 - #child15 and write
<script type="text/javascript">
$(document).ready(function() {
$('#addChildren').click(function() {
$('.children-to-show:hidden').first().show();
});
</script>
This way you dont't need a counter and the div id doesnt't have to be in a row, so you have more ways to configure your div ids.
Explanation
On every click on addChildren, the next hidden element with class children-to-show is shown.
EDIT
gdoron is right, so if you want to get it work with classes:
<script type="text/javascript">
$(document).ready(function() {
$('#addChildren').click(function() {
$('.children-to-show').not('.is-visible').first().show().addClass('is-visible');
});
</script>
If the <div>s are in order 1,2,3,4...15:
$('#addChildren').click(function() {
$('div[id^="child"]').eq(counter).show();
counter++;
});
If they are not in order:
$('#addChildren').click(function() {
$('#child' + (++counter)).show();
});
you can just use for loop if you know exact amount of divs
$(document).ready(function() {
$('#addChildren').click(function() {
for (i=1; i<=15; i++)
{
$('#child'+i).show();
}
});
});
This should do it for you
<script type="text/javascript">
var counter=1
$(document).ready(function() {
$('#addChildren').click(function() {
$('#child' + counter).show(function() {
counter++
});
});
});
</script>
You can add a condition to check the limit of 15 as well. Something like ..
<script type="text/javascript">
var counter=1
$(document).ready(function() {
$('#addChildren').click(function() {
if(counter <= 15) {
$('#child' + counter).show(function() {
counter++
});
}
});
});
</script>
You could just concatenate the counter variable into the jQuery selector:
<script type="text/javascript">
var counter=0
$(document).ready(function() {
$('#addChildren').click(function() {
$('#child' + counter).show(function() {
counter++
});
});
});
</script>
You need to make the div you're showing a variable like $('#child' + counter) so it will show a different div as the values of counter get updated.
var counter=1
$(document).ready(function() {
$('#addChildren').click(function() {
$('#child' + counter).show(function() {
counter++
});
});
});
I've put together this demo to show you.

Categories

Resources