We Keep Coding

Attach attribute [data-name] then click using this data attribute [duplicate]

This question already has answers here:
Direct vs. Delegated - jQuery .on()
(6 answers)
Closed 4 years ago.
I'm trying to add a data-name attribute on clicking one element and then when that element is clicked do something else.
$(".btn01").on("click", function() {
$(".next").attr("data-name", "btn02");
});
$("[data-name='btn02']").on("click", function() {
console.log("I clicked this button");
});
It is updating in the DOM but not working?
Any ideas?

You must use event delegation since the attribute you're using in the selector of the second click event [data-name='btn02'] is created dynamically by the JS code:
$(".btn01").on("click", function() {
$(".next").attr("data-name", "btn02");
});
$("body").on("click", "[data-name='btn02']", function() {
console.log("I clicked this button");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn01">CLICK ME then click the span bellow</button>
<br><br>
<span class="next">Next span</span>

Try the following, use event delegation for attaching event to "[data-name='btn02']", as $("[data-name='btn02']") element will not exist till $(".btn01") is clicked.
$(".btn01").on("click", function() {
$(".next").attr("data-name", "btn02");
});
$(document).on("click", "[data-name='btn02']", function() {
console.log("I clicked this button");
});

If you are just trying to make it so the first button needs to be clicked before the second can, you can just use a boolean variable for that:
var firstButtonClicked = false;
$(".btn01").on("click", function() {
firstButtonClicked = true;
});
// the second button
$(".next").on("click", function() {
if (firstButtonClicked == true) {
console.log("I clicked this button after the first one");
}
});

Check / Uncheck Input Boxes with Jquery [duplicate]

This question already has answers here:
Setting "checked" for a checkbox with jQuery
(43 answers)
Closed 8 years ago.
I've been looking through posts trying to find the answer, but haven't had any luck, so hoping someone can point me in the right direction.
When I use the following code, it checks all the input boxes and it unchecks them. However, if I click the check all again, it doesn't check them all. Why is that?
JQuery
$('document').ready( function() {
$('.check_boxes').click( function() {
if ( $(':checkbox').attr('checked')) {
$(':checkbox').attr('checked', false);
} else {
$(':checkbox').attr('checked', true);
}
});
});
HTML
<input type="checkbox" class="check_boxes" id="check_all" />

Try this:
js
$('document').ready( function() {
$('.check_boxes').click( function() {
if ( $('input:checkbox').prop('checked')) {
$('input:checkbox').prop('checked', true);
} else {
$('input:checkbox').prop('checked', false);
}
});
});
fiddle

Actually once you click on the checkbox, the first if is always true. Hence all checkeboxes get unchecked (including the one you clicked).
I assume you wanted this behavior:
http://jsfiddle.net/vhLMN/18/
$('document').ready( function() {
$('.check_boxes').click( function() {
if ( !this.checked ) {
$('.flip_us :checkbox').attr('checked', false);
} else {
$('.flip_us :checkbox').attr('checked', true);
};
});
});
BTW. There is no label attribute on inputs. You should fix this unless you are using some framework that uses it to create actual label tag.

i think you need this simple code:
$('document').ready( function() {
$('.check_boxes').click( function() {
if ( $(':checkbox').prop('checked')) {
$(':checkbox').prop('checked', true);
} else {
$(':checkbox').prop('checked', false);
}
});
});

jQuery toggle text in div based on checkbox state

I'm still in the process of learning jQuery and have run into something I can't seem to solve. I'm trying to toggle the label of a checkbox in a div located elsewhere on the page. So far I've managed to append the label only if the checkbox is unchecked, but I can't figure out how to remove the text for that filter only if it becomes unchecked. Any advice?
JQUERY:
$('.filter-single').on('click', function () {
if ($('.filter-single input').is(':checked')) {
$('<li>'+$(this).text()+' / </li>').appendTo('.filters-current');
} else {
// what goes here?
}
});
FILTER HTML:
<div class="checkbox filter-single">
<input type="checkbox" value=".rain"/>
<label>Rain</label>
</div>
LABEL HTML:
<div class="filter-details">
<span class="filter-title">Filters:</span>
<ul class="filters-current"></ul>
</div>

Demo
You can use :contains() to look for the corresponding LI and then .remove(), also i would assign the click handler to the input itself instead of the container like this:
$('.filter-single input').on('click', function () {
if ($(this).is(':checked')) {
$('<li>' + $(this).next("label").text() + ' /</li>').appendTo('.filters-current');
} else {
$(".filters-current").find("li:contains('" + $(this).next("label").text() + " /')").remove();
}
});

Something like:
$('.filters-current').html("");
This should set the inner html as empty string.

I guess you are trying to implement several filters, if not Taleeb's answer should work. If you are indeed looking for several, you could try something like this:
var filters={};
$('input:checkbox').on('click', function () {
var filter_name = $(this).siblings("label").text();
if($(this).is(":checked")){
filters[filter_name]=true;
}else{
filters[filter_name]=false;
}
displayFilters();
});
function displayFilters(){
$(".filters-current").html("");
console.log(filters)
for (var filter in filters){
if(filters[filter]){
$(".filters-current").append("<li>"+filter+"</li>")
}
}
}
Demo: http://jsfiddle.net/juvian/X65wv/

how to set to hide initially - javascript

I have this code that shows initially how do I change it to be hidden initially?
$(document).ready(function() {
$('#hideshow').click(function() {
var anchor_value = $('#hideshow').text();
if (anchor_value == 'Hide') {
$('#hideshow').text('Show');
$('#message').hide();
}
if (anchor_value == 'Show') {
$('#hideshow').text('Hide');
$('#message').show();
}
});
});

I suggest you to reconsider your code by:
first of all, look at the basics of js/jQuery
check the visibility of the detail element or use a class instead of check the text of it
use the built in jQuery method toggle to toggle the visibility
to initially hide an element use css a set up accordingly the page
Code:
$(document).ready(function () {
$('#hideshow').click(function () {
if ($("#message").is(":visible")) {
$('#hideshow').text('Show');
} else $('#hideshow').text('Hide');
$('#message').toggle();
})
});
Demo: http://jsfiddle.net/IrvinDominin/CFExY/

How to highlight a table row with rightclick [duplicate]

This question already has answers here:
Bind event to right mouse click
(8 answers)
Closed 9 years ago.
I have created a table using jquery. I can highlight a row when it selected by left click. I used this code for this....
<script type='text/javascript'>
$(document).ready(function() {
$("#tableData").delegate("tr", "click", function() {
$(this).addClass("selected").siblings().removeClass("selected");
});
});
</script>
Now I want to select a row and change the color with rightclick also.. Please any one help me...

You can use the contextmenu event:
$("#tableData").delegate("tr", "contextmenu", function(e) {
alert('Context Menu event has fired!');
//Do functionality here
return false;
});

You can use which property of the event object:
<script type='text/javascript'>
$(document).ready(function() {
$("#tableData").delegate("tr", "mousedown", function(event) {
if(event.which == 3){
$(this).addClass("selected").siblings().removeClass("selected");
}
});
});
</script>
Here is an example: http://jsfiddle.net/Eknr6/

You already "selected" your row, you can retrieve the currently selected row with :
$('tr.selected')
To change color just change your css according to your selected class, here some examples :
tr.selected{
color:red;
}
tr.selected a{
color:black;
}
you might also want to add this into your script :
event.stopPropagation();
event.preventDefault();
If you have any event under that they won't trigger for your click event (the event won't bubble up or down)