I have 3 Jquery function. That is first function which allows to choose only one checkbox
$('input[type="checkbox"]').on('change', function () {
$('input[type="checkbox"]').not(this).prop('checked', false);
});
That is second function which allows to choose a checkbox by clicking a row.
$(document).ready(function () {
$('.boekTable tr').click(function (event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
That is third function which higlights the selected row.
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
} else {
$(this).closest('tr').removeClass("highlight_row");
}
});
});
Problem: I select a row then third function highlights it and when i select another row, it keeps on highlighting till i click the highlighted row. How can i fix that? Should i use another function instead of closest? Thanx.
It's a straight-forward change to make it perform the way you want...
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
// this will remove all highlights before adding a new one
$(this).closest('table').find('tr').removeClass("highlight_row");
$(this).closest('tr').addClass("highlight_row");
} else {
$(this).closest('tr').removeClass("highlight_row");
}
});
});
Update third to something like that:
$("input[type='checkbox']").change(function (e) {
$(this).closest('table').find('tr').removeClass('highlight_row');
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
}
});
remove the highlight_row from the rest
$("input[type='checkbox']").change(function (e) {
$('tr').removeClass("highlight_row");
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
}
});
});
You need to remove class for other trs. You can use siblings function.
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight_row");
$(this).closest('tr').siblings().removeClass("highlight_row");
} else {
$(this).closest('tr').removeClass("highlight_row");
}
});
});
Related
I want to do a simple function in Jquery: when a button is clicked show the input text, when it's clicked again- hide the input text.
<div>
<div id="btnNewGroup">New Group</div>
<input type="text" id="newGroup" style="display:none" />
</div>
and this is the scrupt section:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").hide()) {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
when I click the button the text input is showing, when I click it again I want the input text to be hidden, but nothing happens.
You can use toggle() to show / hide
Live Demo
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
The problem with the condition you have is that you are hiding the element instead of checking if it is hidden. You can is with :hidden like is(':hidden') to check if element is hidden.
if ($("#newGroup").is(':hidden')) {
$("#newGroup").show();
else
$("#newGroup").hide();
if ($("#newGroup").hide())
The hide function does not return a boolean value so you can't use it in an if statement. It returns a jQuery object which is always true so your second block never gets hit.
You can try two things:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Or a simple toggle:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
});
Additionally, when working with selectors multiple times it's a good idea to cache the element - otherwise jQuery tries to find the element each time you try:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
var $newGroup = $("#newGroup"); // Cache it here
if ($newGroup.is(":visible")) {
$newGroup.hide();
}
else {
$newGroup.show()
}
});
});
use .toggle() for hide and show alternatively in jquery
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
Demo
Use .toggle() function
$("#btnNewGroup").click(function () {
$("#newGroup").toggle()
});
Or use :visible pseudo selector with is()
Demo
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Note :hide() function does not return boolean value. Use is(:visible) or is(:hidden)
You need to change
if ($("#newGroup").hide()) {
to (just one possible solution)
if ($("#newGroup").css('display')=='none') {
Because $("#newGroup").hide() will always return true.
And here are the full code:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").css('display')=='none') {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
Have a look at the .toggle() function within the API.
http://api.jquery.com/toggle/
document.getElementById("username").style.display='block';
I don't get why this isn't working.. clickId is given the value access-toggle-all, when I click the checkbox with that classname, so it doesn't make sense (to me at least)..
$(document).ready(function() {
$('input:checkbox').click(function (e) {
var clickId = $(this).attr('class');
if (clickId == 'access-toggle-all') {
alert("if");
$('.access-toggle,.access-group-toggle').prop('checked', this.checked);
} else {
alert("else");
}
alert(clickId);
});
});
I dont know what your issue was, but it was not your use of single or double quotes unless they were inconsistent opening and closing quotes.
I suspect it was something to do with the element being clicked having more than just the class access-toggle-all so this comparison failed:
if (clickId == 'access-toggle-all') {
The correct way to do this logic using jquery is with .is() or hasClass():
$('input:checkbox').click(function (e) {
if ($(this).is('.access-toggle-all')) {
alert("if");
$('.access-toggle,.access-group-toggle').prop('checked', this.checked);
}
});
or
$('input:checkbox').click(function (e) {
if ($(this).hasClass('access-toggle-all')) {
alert("if");
$('.access-toggle,.access-group-toggle').prop('checked', this.checked);
}
});
MY PROBLEM
jQuery(document).ready(function () {
if ($('input.pokazkontakt').prop(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
}
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Demo
2nd part of JS is working (toogle), but i want to check first if checkbox is checked and hide the div or show. Where is a problem?
Try this:
jQuery(document).ready(function () {
$('input.pokazkontakt').each(function(){
if ($(this).is(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
}
});
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Use your logic reversely when you set display:none and display:block.
Use .is to check for checked state.
Use .each to iterate all your checkboxes
DEMO
You can use .is()
if($('input.pokazkontakt').is(':checked'))
instead of if($('input.pokazkontakt').prop(':checked'))
Demo
When the page is loaded (the first dropdown (div StatusID) is dynamically populated from the mysql db) or the user selects Unemployed - EI from the first dropdown box, the div status_sub_6 shows the second select statement.
My .hide .show function activates fine on change but the function hides the second dropdown list on the loading of the page even if the dynamically populated values of the first select (StatusID) meet the compare criteria.
I'm sure that I need an onload function which overrides the following .js code but would really appreciate a bit of help in composing the additional code.
JavaScript:
$(document).ready(function(){
$('#status_sub_6').hide();
$('#StatusID').change(function () {
if ($('#StatusID option:selected').text() == "Unemployed - EI"){
$('#status_sub_6').show();
}
else {
$('#status_sub_6').hide();
}
});
});
You can do this by triggering a change event right after load.
$(document).ready(function(){
...
// your current code
...
$('#StatusID').trigger('change'); // trigger a change
});
try:
$(function() {
$('#status_sub_6').hide();
$(document).on('change', '#StatusID', function () {
if ($('#StatusID option:selected').text() == "Unemployed - EI"){
$('#status_sub_6').show();
}
else {
$('#status_sub_6').hide();
}
});
$('#StatusID').change();
});
You could also do this:
$(document).ready(function(){
if ($('#StatusID option:selected').text() == "Unemployed - EI"){
$('#status_sub_6').hide();
}
$('#StatusID').change(function () {
if ($('#StatusID option:selected').text() == "Unemployed - EI"){
$('#status_sub_6').show();
}
else {
$('#status_sub_6').hide();
}
});
});
or a bit more elegant solutions:
$(document).ready(function () {
toggleSub();
$('#StatusID').change(function () {
toggleSub();
});
});
function toggleSub() {
if ($('#StatusID option:selected').text() == "Unemployed - EI") {
$('#status_sub_6').hide();
}
else {
$('#status_sub_6').show();
}
}
I have two functions.
The first function translates a div click into a checked/unchecked toggle.
The second function translates a checkbox change into a hide/show event.
The problem is that when I use the first function to check/uncheck the box, the second function is not called. I am new to javascript, thanks.
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
evt.stopPropagation();
return false;
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").change(function() {
if($(this).attr("checked")) {
$('.'+this.id).show();
}
else {
$('.'+this.id).hide();
}
});
});
</script>
The change event does not fire when you programmatically change the value of a check box. What you can do to ensure it fires is:
$(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
$checkbox.change();
}
});
Don't bother with the first snippet. Just use LABEL elements:
<label><input type="checkbox">Some option</label>
Now, when the user clicks the label (the text next to the checkbox), the checkbox will be activated.
The second snippet can be optimized:
$('input:checkbox').change(function() {
$('#' + this.id).toggle(this.checked);
});
you are using '.' which is for class selectors instead use '#' since you are using the element ID. Like this:
$(document).ready(function() {
$(":checkbox").bind('change', function() {
if($(this).attr("checked")) {
$('#'+this.id).show();
}
else {
$('#'+this.id).hide();
}
});
});