This question already has answers here:
What's the difference between '$(this)' and 'this'?
(7 answers)
Closed 7 years ago.
I have a simple object of input checkbox elements and want to check in an each loop which ones are checked and the do stuff. The checkboxes are in one tr in several td's in a table.
Here is my code:
$('table.occupancy-table').on('change', '.minimum_stay input', function() {
var minimumStayInputs = $(this).closest('tr').find('input');
$(minimumStayInputs).each(function(){
if(this.prop('checked')) {
//do stuff
}
}
}
If I console.log this in the each loop, I get data like:
<input id="R11520" type="checkbox" name="minimum_stay[152][1442786400]" value="checked">
<input id="R11521" type="checkbox" name="minimum_stay[152][1442872800]" value="checked">...
But I always get an error Uncaught TypeError: this.prop is not a function from this.prop('checked'). I also tried .is(":checked") with the same result.
Any ideas what the reason might be?
Let me know if you need sample html or I should create fiddle.
this inside the loop is the native DOM element, unwrapped from jQuery.
It has to be wrapped again
$('table.occupancy-table').on('change', '.minimum_stay input', function() {
var minimumStayInputs = $(this).closest('tr').find('input');
$(minimumStayInputs).each(function(){
if ( $(this).prop('checked') ) {
}
});
});
You could also just use the native this.checked, or if you're trying to count them
$(this).closest('tr').find('input:checked').length
Related
This question already has answers here:
jquery selector on multiple id
(2 answers)
Closed 5 years ago.
Sorry for that simple question, but how do I add multiple triggers to a jquery-click-event?
I tried that one here
$("#trigger1","#trigger2").click(function() {
//something
});
But that doesn't work. What is the correct syntax there?
Should be like :
$("#trigger1, #trigger2").click(function() {
//Put your logic here
});
Just remove the extra quotes.
Hope this helps.
The reason why your code is not working is you are using a context selector. So what it is saying is: Find #trigger2 and inside of that look for #trigger1.
But what you want is to use a multiple selector.
$("#trigger1, #trigger2").click( ... )
Or I would just use a common class so you do not have to keep track of the ids
$(".commonClass").click( ... )
Or something like
$(document).on("click", "#trigger1, #trigger2, #trigger3", function () {
//do stuff
});
This will let you add as many listeners as you want on multiple DOM elements
This question already has answers here:
How to pass parameter to function using in addEventListener?
(4 answers)
Closed 6 years ago.
I got a problem when trying to make onchange listener for input in JavaScript:
var apple = document.getElementById("apple");
apple.addEventListener("change", validate("apple"));
function validate(fruitName){
var qty = parseInt(document.getElementById(fruitName).value);
console.log(qty);
}
I am trying to check everytime when the user input something for 'apple' input, I will print the quantity at console. But by doing this, It only ran the first time when I refreshed the browser by printing out a NaN and does not work even when I changed the input for 'apple'.
Any ideas?
Thanks in advance.
You have to reference the function, not call it, and you don't need to pass in the name to use as an ID to get the elements, the element is already available in this
var apple = document.getElementById("apple");
apple.addEventListener("change", validate);
function validate(event){
var qty = parseInt(this.value, 10);
console.log(qty);
}
Whenever you add parentheses you call the function, and whatever is returned is passed to the event handler.
As functions return undefined by default, that's what you get.
This question already has an answer here:
How do you assign an event handler to multiple elements in JavaScript?
(1 answer)
Closed 7 years ago.
I am trying to run a function when user clicks on a class.
Here is a fiddle with a similar setup. Except that I am not using buttons in the my code.
FIDDLE
document.querySelectorAll('.menu').onclick = function () { alert("test"); };
I've also tried using the getElementsByClassName, with the same results. Is there something I am missing here?
*Note: I need to accomplish this without jQuery
querySelectorAll returns a list of elements, so you need to specify the one you want, in your case [0]:
document.querySelectorAll('.menu')[0].onclick = function () {
alert("test");
};
jsFiddle example
This question already has answers here:
jQuery - How to select value by attribute name starts with
(4 answers)
Closed 7 years ago.
I want to remove all attributes with name starting data-val-range.
I.e. from the following element I wanna remove the matching attributes:
<input data-val-range-min="*" data-val-range-max="$" data-val-range="hallelujah"/>
Is this possible?
Using this answer, You can just iterate through the attributes, and remove them according to the name...
Your javascript should be something like
$("input").each(function() {
var theElem=this;
$.each(this.attributes,function() {
if(this.specified) {
if(this.name.indexOf("data-val-range")>-1) {
console.log("removing ",this.name);
$(theElem).removeAttr(this.name);
}
}
})
});
Here is a jsfiddle https://jsfiddle.net/dkusds1s/
This question already has answers here:
How to get the attributes of a HTML element using JQuery?
(4 answers)
Closed 8 years ago.
I am looping through drop down option and checking attribute.
if attribute match than counter is increase. At the end i show counter as alert.
This is my code but some how its not working dont know why
var count= 0;
$('.mydropdown option').each(function () {
var level = this.attr("myattr");
if (level == "0") {
count++;
}
});
alert(count);
}
this is a plain javascript object, it does not contain a function called .attr()
Try,
var level = $(this).attr("myattr");
Just convert the this reference into a jquery object and invoke .attr() over it