Develop Reference

Javascript find() Can't Select Input Checkbox

I have this HTML structure :
<div class="col-sm-3" id="checkbox-cod">
<label class="non-escrow">
<input type="checkbox" name="payment_method[COD]" value="1"> COD
</label>
</div>
and I have this javascript (not jQuery) to select and check the input checkbox :
var kkCod = document.getElementById('checkbox-cod');
kkCod.find('input').checked = true;
but the selector is wrong. it can't select the input and give checked value. how to use find() properly in this case? thank you.

First of all, you can use document.querySelector('#checkbox-cod') instead of getElementById .
As an alternative to jQuery find(), you can chain a call to querySelector like :
document.querySelector('#checkbox-cod').querySelector('input').setAttribute('checked',true)

I don't believe find() is a native method of Element but rather a jQuery method.
You can however use querySelector() like this:
kkCod.querySelector('input').checked = true;

How to find parent node of a row using jquery

From following html
<tbody>
<tr id="article0">
<td id="CheckboxDiv0">
<div class="checkbox">
<label>
<input type="checkbox" id="CheckboxArticle0" value="helo">
</label>
</div>
</td>
</tr>
</tbody>
I am trying to get the parent id
$ParentId = $("#checkboxArticle0").parentNode.parentNode.parentNode.parentNode.id;
The code is not working fine. Can someone suggest me how to grab the id of the parent div which is "article0"?

You can use .closest()
var parentId = $("#CheckboxArticle0").closest("tr").attr("id");
Description:
The closest() method returns the first ancestor of the selected element.
Refer: This for more.

Try like this
$("#checkboxArticle0").closest("tr").attr("id")

$("#checkboxArticle0").parents('tr').attr("id")

2 points to be note:
1) Use document.getElementById in javascript to access any element using its id,
2) You have mentioned wrong id , Use "CheckboxArticle0" instead of "checkboxArticle0" (C need to be capital letter)
Correct script is:
var ParentId=document.getElementById("CheckboxArticle0").parentNode.parentNode.parentNode.parentNode.id;
alert(ParentId)

jQuery, how to find an element by attribute NAME?

I found many example finding elements by attribute value BUT not with name. I want to find all elements (can be link, button, anything) with the attribute containing deleteuserid. I tried this:
console.log($('[deleteuserid!=""]'));
but this find "everything" which not even containing the deleteuserid attribute...
something like this: jQuery how to find an element based on a data-attribute value? expect that I dont have a concrete value (in other words, I want to find $("ul").find("[data-slide=*]");

Simply use deleteuserid instead of deleteuserid!="" like following.
console.log($('[deleteuserid]'));

you can use the jquery attribute selector to search by name.
console.log($('[name="deleteuserid"]'));

You can search by simple $('[name="deleteuserid"]')
console.log($('[name="deleteuserid"]'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p name="deleteuserid">
</p>
<div name="deleteuserid">
</div>
<i name="deleteuserid"></i>
<b></b>

$( "*[name*='deleteuserid']" ).addClass('iFoundyou');
JSFiddle

Reference: https://www.w3schools.com/cssref/sel_attr_begin.asp
My demo:
All my selects have id="<f_field_name>"
<select id="f_type" />
<select id="f_employee" />
$('[name="form_monitoria_ligacoes"]').find('[id^="f_"]')

jQuery - Appending images after input field based on value

Firstly here's the fiddle
I'm trying to append an image after input field, the input field can be selected based on value.
HTML Code:
<input type="checkbox" value="example"> Example
JS Code:
$('input[value="example"]').append("<img src='https://www.google.co.in/images/nav_logo195.png'");
Any help would be appreciated

You should use .after(), instead of .append(). The .append() method inserts the new element as the last child of the element it is called on, whereas .after() inserts the new element after the element it is called on.
$('input[value="example"]').after("<img src='https://www.google.co.in/images/nav_logo195.png'/>");
You were also missing the following characters at the end of your string: />

Html:
<div id="id">
<input type="checkbox" value="bigstock">Big store
</div>
js:
html="<img src='https://www.google.co.in/images/nav_logo195.png'>";
$('#id').append(html).trigger("create");
The jsfiddle link for reference:
http://jsfiddle.net/san_here/y6r78mgy/
Hope, it will usefull.

Javascript select element with complicated ID

need some help! am trying to get the value of the below input id "j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" and have tried jquery and javascript such as: document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63") but keep getting a null result. ID can't be changed either, any help appreciated
<td class="sf42_cell_bottom_light"><span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61"><input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417"></span></td>

Use this:
$("[id='j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61']")
By the way, since you are apperently using JSF, this is a good practice to set id to each component to avoid such horrible ids (who can changes if you add/remove components).
See more information in this thread:
Handling colon in element ID with jQuery

Do you have any control of the element? Can you add a class to it?
var val= document.getElementsByClassName("TheClassName");
Or you can get the TD with class sf42_cell_bottom_light (if it is unique) then get its INPUT elements by:
var theTd= document.getElementsByClassName("sf42_cell_bottom_light");
var val = theTD.getElementsByTagName("INPUT");
I need to see more of the HTML to give you an better answer.

You may need to escape colon in your id .So
try this
function RemoveInvalidCharacter(myid) {
return '#' + myid.replace(/(:|\.|\[|\])/g, "\\$1");
}
And call like this
$(RemoveInvalidCharacter('j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61'));
Have a look at How do I select an element by an ID that has characters used in CSS notation

I have tested this code:
<td class="sf42_cell_bottom_light">
<span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61">
<input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417">
</span>
</td>
<script type="text/javascript">
document.write(document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63").value);
</script>
in FF, IE, Chrome (the latest versions)... and seems to work ok... ar you sure it is about this id?
Replace:
document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63")
with
document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63")
The id is different.
http://jsfiddle.net/wNePW/