We Keep Coding

When I click the checkbox I need to show an image in the first column for a particular row

I am new to jQuery.
When I click the checkbox I need to show an image in the first column for a particular row.
I wrote the click functionality but its not working.
Providing my code below:
http://jsfiddle.net/5parbfeu/
$("#checkIDGrid").click(function() {
alert("I am here");
var img = $('<img />', {
id: 'Myid',
src: 'https://thumbs.dreamstime.com/z/pixel-perfect-web-development-flat-icons-set-website-programming-process-webpage-coding-user-interface-creating-45297890.jpg',
alt: 'MyAlt'
});
img.appendTo($('<tr>'));
});

You can always use onclick='checkIDGrid()' in your code. It will definitely do its job. Replace the click with function checkIDGrid(). And you can go from there.
<input onclick = 'checkIDGrid()' type='checkbox' checked=true class=''>

Selecting an element depending on attribute's value

How can I select an element on the form and perform click action on it using jQuery? Here's an example for what I want:
If I have many image buttons created on the runtime and here's one of them:
<img class="arrow arrowDown" onclick="toggleMyChildren(this);" alt="" src="/sp.gif" complete="complete" svalue="2"/>
How can I select this element and perform "Click" action on it depending on the value of attribute's (svalue) value?

$(document).ready(function() {
$("img[svalue=2]").on("click", function() {
var attr = $(this).attr("svalue")
alert(attr);
});
});
or if you need attribute on click :
function toggleMyChildren(ooo) {
var attr = $(ooo).attr("svalue")
alert(attr);
}

How can I create a css glow effect with javascript?

What I'm going after is a code that will gather all my text input fields and detect whether or not they have any input. If so I'd like for there to be a glow effect added, if they're left empty or they delete the data and leave it empty I'd like for the glow effect to turn off.
So far from everything I've found this is what I came up with so far, it doesn't work of course, but it's the best I could try to rationalize.
function glow(){
var text = document.getElementsByClassName('tex_inp01 tex_inp02');
if (text.value ==null){
text.style.boxShadow="#8fd7d2 0px 0px 22px";
}
else
remove.style.boxShadow;
}/**function**/
I used the .getElementsByClassName because the getElementsById didn't support multiple IDs as it seems, but if there's another more efficient way of gathering them all please share.

Simple solution can be adding class having glow with javascript:
var text = document.getElementsByClassName('tex_inp01 tex_inp02');
text[0].className = text[0].className + " glow";
DEMO
Note: If you want to add glow class to each input then you have to iterate through loop and add class to each element. Because text is
HTMLCollection of elements.

You need to get the value of each element, not of the HTMLCollection returned by document.getElementsByClassName; Array.prototype.forEach can help with this. Then, a value can’t be null, but empty.
Edit: Wait a minute… you want the glow effect if the element has an input, right? Then your if-else statement is the wrong way around.
This is the correct function:
function glow() {
"use strict";
Array.prototype.slice.call(document.getElementsByClassName("tex_inp01 tex_inp02")).forEach(function(a) {
if (a.value !== "") {
a.style.boxShadow = "0px 0px 22px #8fd7d2";
}
else {
a.style.boxShadow = "";
}
});
}

You have a couple of mistakes in your existing code (as presented in the question): (1) text.value ==null - do not check against null, because an inputs value will never be a null. Check its length. (2) remove.style.boxShadow; - I think that was a typo. It should have been text.style.boxShadow = 'none'.
..to be a glow effect added, if they're left empty or they delete the
data and leave it empty I'd like for the glow effect to turn off..
You can check if the input has been left empty by simply checking the length of the value. However, to check if the input has been entered and then deleted you will have to keep a flag to keep track of that. You can do that by hooking up the change event on inputs and then setting a flag via data attribute. Later when you are checking each input for applying a style, along with the length also check this attribute to see if the input was edited out.
Here is a simple example putting together all of the above (explanation in code comments):
var inputs = document.getElementsByClassName("a b"), // returns a collection of nodelist
button = document.getElementById("btn"); // just for the demo
button.addEventListener("click", checkInputs); // handle click event on button
[].forEach.call(inputs, function(elem) { // iterate over all selected inputs
elem.addEventListener("change", function() { // handle change event
this.setAttribute("data-dirty", true); // set a data attribute to track..
}); // .. a flag when it is changed
});
function checkInputs() {
[].forEach.call(inputs, function(elem) { // iterate over selected inputs
var isDirty = elem.getAttribute("data-dirty"); // check the dirty flag we set
if ((elem.value.length > 0) || (isDirty)) { // if empty or changed
elem.style.boxShadow = "none"; // reset the style
} else {
elem.style.boxShadow = "#f00 0px 0px 5px"; // else apply shadow
}
});
}
<input class="a b" /><br /><br /><input class="a b" /><br /><br />
<input class="a b" /><br /><br /><input class="a b" /><br /><br />
<button id="btn">Check</button>

If you wanted to validate the inputs while the user is typing, you can use keyboard events to check the value of the input(s):
document.querySelector('input[type="text"]').addEventListener('keyup',
function(event){
var element = event.target;
if (element.value.trim() === '') {
element.classList.add('empty');
} else {
element.classList.remove('empty');
}
});
See fiddle for example: http://jsfiddle.net/LrpddL0q/.
Otherwise this could be implemented the same way without the addEventListener to perform as a one-off function.

Jquery can help you as the following
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function () {
$(".MyInput").bind('keypress', function () {
$('.MyInput').css("boxShadow", "#8fd7d2 0px 0px 22px");
});
$(".MyInput").bind('keydown', function () {
if ($(".MyInput").val() == "") {
$('.MyInput').css("boxShadow", "none");
}
});
});
</script>
HTML:
<input type="text" value="" class="MyInput" />
this code working only online If you need to download Jquery library visit this
https://jquery.com/download/

Change Image based on dropdown and image link

Expanding on the question here: How to use javascript to swap images with option change?
In accordance with the method in that question of changing an image based on a select option, how would I also change the <a></a> link around the image to mirror the displayed image?
<script>
var colorUrlMap = {
"Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
//Add more here
"White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
</script>
<select name="Color:"onchange="document.getElementById('myimage').src = colorUrlMap[this.value];">
<option value="Black/White">Black/White</option>
<!-- Add more here -->
<option value="White/Red/Black">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
example:
<a href="WHATEVER IS CHOOSEN BASED ON THE urlMAP"><img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
</a>

Since you are doing multiple things now, it would be better to break that change code into its own function. But basically you need to access the href attribute of the a tag the same way you are accessing the src on the img tag.
<script>
var colorUrlMap = {
"Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
//Add more here
"White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
function changeSelect(el) {
document.getElementById('myimage').src = colorUrlMap[el.value];
document.getElementById('link_id').href = colorUrlMap[el.value];
}
</script>
<select name="Color:" onchange="changeSelect(this)">
<option value="Black/White">Black/White</option>
<!-- Add more here -->
<option value="White/Red/Black">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
example:
<a id="link_id" href="WHATEVER IS CHOOSEN BASED ON THE urlMAP"><img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
</a>
You may notice that I also gave the a an id value.
update
If you need to get that link from somewhere else, here is a possible alternative way to write your script. I added another level of properties to each color item: a src and href to match the attribute names you are updating on the a and img tags.
<script>
var colorUrlMap = {
"Black/White" : {
"src" : "images/taylormade_purelite_standbag_bk.jpg",
"href" : "your link here"
},
//Add more here
"White/Red/Black" : {
"src" : "images/taylormade_purelite_standbag_wrb.jpg",
"href" : "your other link here"
}
};
function changeSelect(el) {
document.getElementById('myimage').src = colorUrlMap[el.value].src;
document.getElementById('link_id').href = colorUrlMap[el.value].href;
}
</script>
update 2
To address the question in the comments about radio buttons, yes. From your code example, currently you have a form submission on the onclick event of the radio. You would need to change that. The trick with radio buttons however, is that you only want to use the value of the selected radio. If you use the onchange event on the radio, it will fire both when it is selected and deselected.
So if you want to use the same function for both radios and selects, you can wrap the setter lines in an if statement:
function changeColor(el) {
if (el.nodeName != "INPUT" || el.checked) {
document.getElementById('myimage').src = colorUrlMap[el.value].src;
document.getElementById('link_id').href = colorUrlMap[el.value].href;
}
}
This should work on select, input[type=radio], and input[type=checkbox]. You can put it in a onclick, onchange, or onkeyup handler. (onkeyup is good when the keyboard is used to change the values.)

Replacing the source attribute of multiple JQuery selectors

I'm trying to get it when a button is clicked, all buttons are given the Off state, (src is btnCircuitxOff.gif) and the one selected is given the On state (src is btnCircuitxOn)
That is clicking one will deselect the others and select itself, this is only visual feedback for a physical device on the other end of an ajax query, otherwise I would use radio buttons themselves.
So far I have,
Html / css
<div id='controls'>
<input type="image" class = "Circuit _100" src="btnCircuit100Off.gif" onclick="selectCircuit('100');"/>
<input type="image" class = "Circuit _10K" src="btnCircuit10KOff.gif" onclick="selectCircuit('10K');"/>
<input type="image" class = "Circuit _100K" src="btnCircuit100KOff.gif" onclick="selectCircuit('100K');"/>
<input type="image" class = "Circuit _1M" src="btnCircuit1MOff.gif" onclick="selectCircuit('1M');"/>
<input type="image" class = "Circuit _10M" src="btnCircuit10MOff.gif" onclick="selectCircuit('10M');"/>
<input type="image" class = "reset" src="btnReset.gif" onclick="reset();"/>
</div>
Javascript
function selectCircuitButtons(s)
{
$(".Circuit").attr("src",$(".Circuit").attr("src").replace("On","Off"));
$("._"+s).attr("src",$("._"+s).attr("src").replace("Off","On"));
}
Which almost seems to work, except that as soon as I click something, every image gets replaced with btnCircuit100Off instead of their individual btnCircuitxOff images.
I'm almost sure I almost have a solution, but how can I store each selector to use when editing the src element?
I've looked at .each and $(this) but I'm new to JQuery and am having troubles formulating a solution.
Also suggestions for a good title are welcome.

You need to read the current value of the attribute for each element, rather than always reading a single value.
To help you with that, jQuery allows you to pass a callback:
$(".Circuit").attr("src",
function(elem, oldSrc) { return oldSrc.replace("On","Off"); }
);

You can use $.each to iterate through each matching item
function selectCircuitButtons(s) {
$(".Circuit, ._"+s).each(function(index,item){
$(item).attr("src",$(item).attr("src").replace("On","Off"));
});
}

You need to iterate through circuite using $.each
You have to toggle each image name along element has class or not:
function selectCircuitButtons(s) {
$(".Circuit").each(function() {
var hasS = $(this).hasClass("_"+ s);
if(hasS) {
$(this).attr("src", $(this).attr("src").replace("Off","On"));
} else {
$(this).attr("src", $(this).attr("src").replace("On","Off"));
}
});
}
EDIT simpler (with #SLaks technique):
function selectCircuitButtons(s) {
$(".Circuit").attr("src", function(elem, oldSrc) {
return $(elem).hasClass("_"+ s) ?
oldSrc.replace("Off","On") : oldSrc.replace("On","Off");
});
}