My HTML:
<li>
<input type="checkbox" id="check-1">
<label for="check-1">foo</label>
</li>
I am trying to change "foo" to "bla" with this JS code:
$("#check-1 label").text("bla");
but nothing happens and I am getting no errors. I also tried with :first-child.
Any ideas?
You can use this
$('label[for=check-1]').text('bla');
The label is not a child of the input. It's the next element:
$("#check-1").next().text('bla');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<input type="checkbox" id="check-1">
<label for="check-1">foo</label>
</li>
In input there is not child elements, you can use $.next to get next element after input
$("#check-1").next('label').text('bla');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<input type="checkbox" id="check-1">
<label for="check-1">foo</label>
</li>
try this
$("#check-1 + label").text("bla");
Related
I have this little sample if jquery code, but I want to make it more specific for one of two different inputs of my HTML page.
<script>
// check only one box at time
$(document).ready(function() {
$('input:checkbox').click(function() {
$('input:checkbox').not(this).prop('checked', false);
});
});
</script>
And these are the two concerned inputs :
<div id="reponses-section" class="form-check">
<c:forEach items="${question.reponses}" var="reponse">
<input id="${reponse.id}" name="id-reponse" value="${reponse.id}"
type="checkbox" class="form-check-input">
<h5>${reponse.texte}</h5>
</c:forEach>
</div>
<div id="theme-btn" class="pull-right">
<label class="switch">
<input id="changeThemeBtn" type="checkbox" onclick="getTheme(this);" value="dark">
<span class="slider round"></span>
</label>
</div>
Is it possible to specify an id for the js sample of code, and if yes what is the syntax to use ?
Thank you in advance
jQuery selects items using CSS selector syntax, so ID would just be #yourTargetId.
I strongly recommend you to use this method. You can change the data-id name with whatever you want.
$(document).ready(function() {
$('input[data-id="checkbox1"]').click(function() {
$('input[data-id="checkbox1"]').prop('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input data-id="checkbox1" id="${reponse.id}" name="id-reponse" value="${reponse.id}" type="checkbox" class="form-check-input">
<input data-id="checkbox2" id="changeThemeBtn" type="checkbox" onclick="getTheme(this);" value="dark">
I return the elements of the list with a for loop.
I left one of the elements in this list below as an example.
My goal is to reach the label in this html and read the text value. How can I do that?
<li>
<a class="dd-option"> <input class="dd-option-value" type="hidden" value="3">
<img class="dd-option-image" src="/Images/Sample/0.png">
<label class="dd-option-text">Sampleee</label>
<small class="dd-option-description dd-desc">Sample sampleee.</small>
</a>
</li>
Using vanilla JS:
You can find the element with querySelector() and access innerText or textContent property.
var labelText = document.querySelector('label.dd-option-text').textContent;
console.log(labelText);
<li>
<a class="dd-option"> <input class="dd-option-value" type="hidden" value="3">
<img class="dd-option-image" src="/Images/Sample/0.png">
<label class="dd-option-text">Sampleee</label>
<small class="dd-option-description dd-desc">Sample sampleee.</small>
</a>
</li>
Using jQuery: Access the text() on the returned object:
var labelText = $('label.dd-option-text').text();
console.log(labelText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
<a class="dd-option"> <input class="dd-option-value" type="hidden" value="3">
<img class="dd-option-image" src="/Images/Sample/0.png">
<label class="dd-option-text">Sampleee</label>
<small class="dd-option-description dd-desc">Sample sampleee.</small>
</a>
</li>
Jquery
let yourListElement = $("ul li")
console.log(yourListElement.find("label").text())
Vanilla Javascript
yourListElement.querySelector(".dd-option-text").textContent
Working on revamping some old code and needing some help on this last addition. Basically can have a variable number of checkboxes and need to get the labels text to any of those checkboxes and append that text to another div. Have rewritten this a ton of times and used a lot of others code but nothing seems to be working. Have seen several similar questions on here but none of those have worked for a solution to this problem.
Problem:
Get a labels text associated to it's input checkbox. Then once that text value is gathered append it to a separate div.
Note:
The checkboxes have an ID and a VALUE that are the same because of some different code versions just trying to get them to work. Would like a solution using VALUE only.
HTML:
<a cid="38" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="38" id="38">
<label for="38">Category ONE</label>
</div>
</a>
<a cid="14" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="14" id="14">
<label for="14">Category TWO</label>
</div>
</a>
<div id="labelName"></div>
JS:
$(".cat_filter").live('click', function() {
$(this).find("input:checkbox").attr("checked", true);
var labelName = $(this).find("label[for='"+$(this).attr("id")+"']").text();
labelName.appendTo('#labelName');
});
Fiddle:
http://jsfiddle.net/wfuller/o25z9w0f/1/
Any help would be greatly appreciated.
So this should solve your problem:
$(".cat_filter").on('click','input',function() {
//On click on an input field. if this isn't OK tell me and I will change it again.
$('#labelName').html($('label[for='+$(this).prop('id')+']').html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a cid="38" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="38" id="38">
<label for="38">Category ONE</label>
</div>
</a>
<a cid="14" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="14" id="14">
<label for="14">Category TWO</label>
</div>
</a>
<div id="labelName"></div>
Greetings from Vienna
var nodeList = document.querySelectorAll('input[type ="checkbox"]');
var div = document.getElementById('myDiv');
for (node in nodeList) {
div.innerHTML += node.text; //or label if you set that attribute on the element
}
Does not rely on jQuery
I'm adjusting an existing page where there are nested checkboxes, like this:
<ul>
<li>
<label><input type="checkbox" class="categorycheckbox">Group 1</label>
<ul>
<li>
<label><input type="checkbox" class="productcheckbox">Item 1</label>
</li>
<li>
<label><input type="checkbox" class="productcheckbox">Item 2</label>
</li>
</ul>
</li>
<li>
<label><input type="checkbox" class="categorycheckbox">Group 2</label>
<ul>
<li>
<label><input type="checkbox" class="productcheckbox">Item 1</label>
</li>
<li>
<label><input type="checkbox" class="productcheckbox">Item 2</label>
</li>
</ul>
</li>
</ul>
And so on. I'm using jQuery to give the users the ability to select/deselect all child inputboxes, like this:
var updateCheckedState = function () {
var list = $(this).closest("li").find("ul");
$(".productcheckbox", list).attr("checked", this.checked);
};
$(".categorycheckbox").change(updateCheckedState);
This works for checking once and unchecking once for each group. Then it stops working, and I don't understand why. I've created a fiddle: http://jsfiddle.net/AQ76y/
use prop instead of attr.
$(".productcheckbox", list).prop("checked", this.checked);
Fiddle
Because sometimes updating the attribute does not update the element property but using an prop and updating the property it is ensured that it will work across browsers.
In earlier verisons of jquery attr used to do the work of prop, so it used to work then
the input check box code:
<li class="odd"><input type="checkbox" class="forminput" name="VD10" checked="checked" value="http://test1.com">
example 1</li>
<li class="even><input type="checkbox" class="forminput" name="VD11" checked="checked" value="http://test2.com">
example 1</li>
<li class="odd"><input type="checkbox" class="forminput" name="VD12" checked="checked" value="http://test3.com">
example 1</li>........
the button code:
<li>
<input type="checkbox" id="checkall" name="checkall" checked="checked">
<label for="checkall">check all</label>
<input type="button" value="copy the checked link" class="button">
</li>
now, i want to do when click the copy the checked link button. it will copy the checked input value to the clipboard? how do i do?
Try this,
$(".button").click( function () {
var selectedCheckboxValue = "";
$('input.forminput:checked').each(function() {
selectedCheckboxValue += $(this).val() + ", ";
});
alert(selectedCheckboxValue);
});
click here see the working demo. http://jsfiddle.net/t5TKm/
You can't copy to the clipboard without flash, silverlight, or some other rich-client plugin.
But, here is the answer to that question: How do I copy to the clipboard in JavaScript?
And: How to retrieve checkboxes values in jQuery
You can use the document.getElementByTag('VD10').checked to check if the checkbox is checked or not