Develop Reference

I need to add aria-label to all links on the website using the link text as aria label

I am trying to add aria-label to all links that don't have it on the site. I want to use the link text as aria-label.
$(document).ready(function () {
$("a").each(function () {
var attr = $(this).attr('aria-label');
if (typeof attr == typeof undefined && attr == false) {
var txt = $(this).text();
$(this).attr("aria-label", txt);
}
});
});

The simplest way to do this would be to use the :not selector to find the elements without the attribute. Then you can provide a function to attr() which adds it to those found. Try this:
jQuery($ => {
$('a:not([aria-label])').attr('aria-label', function() {
return this.textContent.trim();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Foo Bar
Fizz Buzz

Use This:
$("a").each(function () {
var attr = $(this).attr('aria-label');
if (!attr) {
var txt = $(this).text();
$(this).attr("aria-label", txt);
}
});

disable anchor link '<a>' if one of my six checkboxes are not checked

How can I disable a anchor link if one(1) of my six(6) checkbox is not check?
var first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094');
$("a").click(function(e) {
if($("first_option").prop("checked") === false) {
e.preventDefault(); return false;
} else {return true;};
});

Your current logic doesn't work as you're only looking at the checked property of the first element you select, not all of them.
To achieve what you require, you can use the :checked selector to get all the checked elements within the selectors you provide, then check the length property of the result to see if there aren't any. Try this:
var $first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094');
$("#tmp_button-99035").click(function(e) {
if ($first_option.filter(':checked').length === 0) {
e.preventDefault();
alert('Please Choose Collar Colour To Continue');
};
});

first_option.prop("checked") will always check for first element. What you have to do is loop over all elements to check
Like this
$("#tmp_button-99035").click(function(e) {
var isChecked = false;
for (var i = 0; i < first_option.length; i++) {
if (first_option.eq(i).prop("checked")) {
isChecked = true;
break;
}
}
if (!isChecked) {
alert('Please Choose Collar Colour To Continue');
e.preventDefault();
}
return isChecked;
});

Well, the js snippet of yours is only checking the first element. So, you have to track other checkboxes as well for correct result.
var first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094')
$(document).on('click', '#tmp_button-99035', function (e) {
if ($(first_option).filter(":checked").length == 0) {
e.preventDefault();
}
});

show div when all input fields have content

I have a form with a few input fields, I only want to show a div when all the input fields got content, when one of the input fields has no content the div should disappear again.
I made it work with one input field, but how do I get it to work when all the input fields are filled in (don't know if its a good clean way?):
$(function () {
$('input').change(function() {
$('.next').toggle($(this).val().length !== 0);
}); });
Fiddle:
http://jsfiddle.net/uQyH9/19/

Try this : http://jsfiddle.net/uQyH9/21/
$(function () {
var _cached=$('input');
_cached.change(function() {
if (_cached.filter(function (){return $(this).val().length }).length==_cached.length)
$('.next').show();
else
$('.next').hide();
});
});

You can use a filter function to check that all the input are filled.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/DwF2P/
UPDATE
You can check the value of the elements by type by cheking type attribute.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
var myType=$(this).attr("type");
if (myType === "checkbox") return !$(this).is(":checked");
if (myType==="radio"){
var myName = $(this).attr("name");
if (myName==="") return !$(this).is(":checked");
return $('input[name='+ myName +']:checked').length===0
}
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/pqJhg/

Loop over the inputs. If you find one that isn't filled in, then hide the DIV. If you don't, show the DIV.
$('input').change(function() {
var allFilled = true;
$('input').each(function() {
if (this.value === '') {
allFilled = false;
return false; // Terminate the loop
}
}
$('.next').toggle(allFilled);
});

Events being bound twice or more jquery

I'm trying to generate html on the fly with javascript. I'm binding on the click of buttons on my page. There are multiple buttons on my page which are causing my elements to be bound multiple times which produces the desired results to appear in the amount of times the button has been clicked.
My question is there something that can check if a element is already bound in jquery? If so, how do I incorporate that with the .live() function in jquery.
Here is my code:
$(document).ready(
function () {
$(':button').live("click", ".textbox, :button", function () {
alert("binding");
$(".textbox").click(function () {
defaultVal = this.defaultValue;
if (this.defaultValue) {
this.value = "";
}
});
$(".textbox").blur(function () {
if (this.value == "") {
this.value = defaultVal;
}
});
$('[name="numsets"]').blur(function () {
if (!parseInt(this.value)) {
$(this).val("you need to enter a number");
}
});
$('[name="weightrepbutton"]').click(function () {
var $numsets = $(this).parent().children('[name="numsets"]');
if ($numsets.val() != "you need to enter a number" && $numsets.val() != "Number of Sets") {
var numbersets = parseInt($numsets.val())
repandweight.call(this, numbersets)
$(this).hide();
$numsets.hide();
}
})
});
});
The problem is line 4, every time a button is clicked, all functions that were previous bound seem to be bound to the same function twice, which is a problem.
Thanks for the help!

You are doing it twice ! One inside another. Take out the outer binding and it should work
$(document).ready(function () {
$(document).on("click",".textbox",function () {
defaultVal = this.defaultValue;
if (this.defaultValue) {
this.value = "";
}
});
$(document).on("blur",".textbox",function () {
var item=$(this);
if (item.val() == "") {
item.val(defaultVal);
}
});
$(document).on("blur","input[name='numsets']",function () {
var item=$(this);
if (!parseInt(item.val())) {
item.val("you need to enter a number");
}
});
$(document).on("click","input[name='weightrepbutton']",function () {
var $numsets = $(this).parent().children('[name="numsets"]');
if ($numsets.val() != "you need to enter a number" && $numsets.val() != "Number of Sets") {
var numbersets = parseInt($numsets.val())
repandweight.call(this, numbersets)
$(this).hide();
$numsets.hide();
}
})
});
if you are using jQuery 1.7+ version, consider switching to jQuery on instead of live.
EDIT: Updated live to on as OP mentioned it in the comment.

How do I call a sub-function from within a function object in javascript

I've checked the related questions on stack overflow, but can't seem to find an answer to my predicament. I'm trying to use a plugin for javascript (Tag it! - Tag Editor) and I need to find a way to call one of its functions "create_choice()" EDIT: at some point after it has been initiated. Is there a way after calling :
$tagit = $("#mytags").tagit();
that I can then call something like
$tagit.create_choice('test123');
Here is a link for the example :
http://levycarneiro.com/projects/tag-it/example.html
Below is the code from the plugin if it is any help
(function($) {
$.fn.tagit = function(options) {
var el = this;
const BACKSPACE = 8;
const ENTER = 13;
const SPACE = 32;
const COMMA = 44;
// add the tagit CSS class.
el.addClass("tagit");
// create the input field.
var html_input_field = "<li class=\"tagit-new\"><input class=\"tagit-input\" type=\"text\" /></li>\n";
el.html (html_input_field);
tag_input = el.children(".tagit-new").children(".tagit-input");
$(this).click(function(e){
if (e.target.tagName == 'A') {
// Removes a tag when the little 'x' is clicked.
// Event is binded to the UL, otherwise a new tag (LI > A) wouldn't have this event attached to it.
$(e.target).parent().remove();
}
else {
// Sets the focus() to the input field, if the user clicks anywhere inside the UL.
// This is needed because the input field needs to be of a small size.
tag_input.focus();
}
});
tag_input.keypress(function(event){
if (event.which == BACKSPACE) {
if (tag_input.val() == "") {
// When backspace is pressed, the last tag is deleted.
$(el).children(".tagit-choice:last").remove();
}
}
// Comma/Space/Enter are all valid delimiters for new tags.
else if (event.which == COMMA || event.which == SPACE || event.which == ENTER) {
event.preventDefault();
var typed = tag_input.val();
typed = typed.replace(/,+$/,"");
typed = typed.trim();
if (typed != "") {
if (is_new (typed)) {
create_choice (typed);
}
// Cleaning the input.
tag_input.val("");
}
}
});
tag_input.autocomplete({
source: options.availableTags,
select: function(event,ui){
if (is_new (ui.item.value)) {
create_choice (ui.item.value);
}
// Cleaning the input.
tag_input.val("");
// Preventing the tag input to be update with the chosen value.
return false;
}
});
function is_new (value){
var is_new = true;
this.tag_input.parents("ul").children(".tagit-choice").each(function(i){
n = $(this).children("input").val();
if (value == n) {
is_new = false;
}
})
return is_new;
}
function create_choice (value){
var el = "";
el = "<li class=\"tagit-choice\">\n";
el += value + "\n";
el += "<a class=\"close\">x</a>\n";
el += "<input type=\"hidden\" style=\"display:none;\" value=\""+value+"\" name=\"item[tags][]\">\n";
el += "</li>\n";
var li_search_tags = this.tag_input.parent();
$(el).insertBefore (li_search_tags);
this.tag_input.val("");
}
};
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
};
})(jQuery);

I've created a working example at http://jsfiddle.net/nickywaites/DnkBt/ but it does require making changes to the plugin.

Change
$.fn.tagit = function(options) { ...
to
$.fn.tagit = function(options,callback) { ...
Add
if (callback && typeof callback == 'function') {
callback();
}
after
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
};
Now you can call a function of your choice right after the tagit call:
$tagit = $("#mytags").tagit(yourOptions, function(){
alert('hi')!
});

You can try to add
return this;
right after the function create_choice block. tagit will return itself and you can call make_choice or any function contained in .fn.tagit