I am using the following code to uncheck selected check boxes on page refresh.
for (i = 0; i < object.length; i++)
{
object[i].checked = false;
}
The validation after refresh will work but the checkboxes will stay as selected.(Tick wont go)
Please Help.
The attribute checked of the checkbox didn't use value true or false. (Input checked attribute on W3Schools)
In order to uncheck the checkboxes, you have to remove the attribute from the element:
for (i = 0; i < object.length; i++) {
if (object[i].hasAttribute("checked")) {
object[i].removeAttribute("checked");
}
}
Obviously, you can check the checkboxes by adding the attribute to the element:
for (i = 0; i < object.length; i++) {
if (!object[i].hasAttribute("checked")) {
object[i].addAttribute("checked");
}
}
This will work on every single browser by the way.
try :
for (i = 0; i < object.length; i++)
{
object[i].checked = "off";
}
Related
I've 2 columns with checkboxes when one column is checked all respective are checked likewise in 2nd column but the problem is here, client wants when One column of checkbox is checked then 2nd column will be disable or throw alert message to check only one column at a time?
function SelectAll1(headerchk, gridId) {
var gvcheck = document.getElementById(gridId);
var i, j;
if (headerchk.checked) {
for (i = 0; i < gvcheck.rows.length - 1; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
for (j = 1; j < inputs.length; j++) {
if (inputs[j].type == "checkbox") {
inputs[j].checked = true;
}
}
}
}
else {
for (i = 0; i < gvcheck.rows.length - 1; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
for (j = 1; j < inputs.length; j++) {
if (inputs[j].type == "checkbox") {
inputs[j].checked = false;
}
}
}
}
}
You can ch
I don't really know what you're trying to do without the HTML but here's a start you can build off.
var selected = $('.check:checked').length;
if (selected >= 1) {
$('.check').prop('disabled', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check" checked="checked">
<input type="checkbox" class="check">
<input type="checkbox" class="check">
From the little info given I assume this:
SelectAll1 clear or set all checkboxes in column 1.
SelectAll2 clear or set all checkboxes in column 2.
headerchk is a checkbox when clicked clears or sets all.
Do this change:
After each line in the code where SelectAll1(headerchk, gridId) is called you change it to SelectAll1(headerchk.checked, gridId).
Insert another line below this line with a negation:
SelectAll2(!headerchk.checked, gridId)
After each line in the code where SelectAll2(headerchk, gridId) is called you change it to SelectAll2(headerchk.checked, gridId).
Insert another line below this line with a negation:
SelectAll1(!headerchk.checked, gridId)
You only showed me the code for SelectAll1, so I assume SelectAll2 is the same when you not yet know how to make them different. Correct me if this is not the fact!
Continue by change the function SelectAll1 to the following:
function SelectAll1(header_checked, gridId) {
var gvcheck = document.getElementById(gridId);
var i, j;
for (i = 0; i < gvcheck.rows.length - 1; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
for (j = 1; j < inputs.length; j++) {
if (inputs[j].type == "checkbox") {
inputs[j].checked = header_checked;
}
}
}
}
The else-part and if is eliminated by moving the condition to the assignment that is eiher true or false. The .checked part is moved outside the function.
Do the same change in SelectAll2
Test if it works and report to me!
I have a group of checkbox that must be checked on load of the page. I have a onload script for auto checking the checkbox but when I unchecked the checkbox and reloads the page, it's still checked. How can it remember it's last state? Thanks in advance
Try this...
var i, checkboxes = document.querySelectorAll('input[type=checkbox]');
function save() {
for (i = 0; i < checkboxes.length; i++) {
localStorage.setItem(checkboxes[i].value, checkboxes[i].checked);
}
}
function load_() {
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ?
true:false;
}
}
working fiddler:- http://jsfiddle.net/sQuEy/104/
I am trying to clear all the fields in my .aspx page using javascript (Should be cross-browser). The below code is working fine for TextBox fields but not for Label fields.
var elements = document.getElementsByTagName("input");
for (var i = 0; i < elements.length; i++) {
if (elements[i].type == "text") {
elements[i].value = "";
}
else if (elements[i].type == "label") {
elements[i].value = "";
}
}
Later I saw that HTML is rendering asp.net Labels as span so I also tried:
else if (elements[i].type == "span") {
elements[i].innerHTML = "";
}
Still the Labels are not being cleared. Am I doing something wrong here?
And the other problem is, whenever I refresh the page, the cleared TextBox fields are again being populated with the old values.. (really frustrating)
I am trying the above code by referring this
Please help.
In modern browsers, this will clear all span elements.
[].slice.call(document.querySelectorAll("span")).forEach(function(e){
e.innerHTML="";
})
If you have applied the class "label" to your ASP labels, then you could be more specific:
[].slice.call(document.querySelectorAll(".label")).forEach(function(e){
e.innerHTML="";
})
Here is an example that will work in older browsers:
var spans = document.getElementsByTagName("span");
for (var i=0; i < spans.length; i++)
{
if ("label" == spans[i].className)
spans[i].innerHTML = "";
}
It is because there are no such types as label or span. span and label are completely different tag so you should use getElementsByTagName for each of them. The following code should do the trick bu use more clear conditions for the if blocks.
var elements = document.getElementsByTagName("input");
for (var i = 0; i < elements.length; i++) {
if (elements[i].type == "text") {
elements[i].value = "";
}
}
elements = document.getElementsByTagName("span");
for (var i = 0; i < elements.length; i++) {
if (elements[i].className == "aspLabel") {
elements[i].innerHTML = "";
}
}
elements = document.getElementsByTagName("label");
for (var i = 0; i < elements.length; i++) {
if (elements[i].className == "labelClass") {
elements[i].innerHTML = "";
}
}
Why not using html label or span with runat="server", then you will not be facing any problem with different rendering of control in different browsers
<label id="lblMyLabel" runat="server"></label>
or
<span id="spMySpan" runat="server"></span>
and this code should work then
var elements = document.getElementsByTagName("label");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "";
}
By referring #Bert Evans post I solved my problem.. The problem was that my all label fields including the headings had class name as 'label'. So if I use the Bert's solution, It will clear all the label fields including headings (which I dont want). Earlier, I thought I can solve this by assigning multiple classes to the fields which I want to clear. something like this
<asp:Label class="label clear" ID="lblBoxId" runat="server" Text="Box Id:"></asp:Label>
and then Bert's solution,
var spans = document.getElementsByTagName("span");
for (var i=0; i < spans.length; i++)
{
if ("clear" == spans[i].className) //replacing 'label' with 'clear'
spans[i].innerHTML = "";
}
This doesn't solve the problem. but when I used combination of both classes, the problem solved :).
if ("label clear" == spans[i].className) //using combination of classes as condition
This maybe simple but I really wasted my precious time understanding it. So I shared :)
EDIT: Can also be solved using simple indexOf()
if (spans[i].className.indexOf("clear") != -1) //not tested
For this particular challenge I am required to toggle membership of an already created class for all <li> elements in two given lists (at the same time). If a <li> element in either list is not currently assigned the class, it is assigned the class; if a <li> element in either list is currently assigned the class, the class is removed. Everytime a button is clicked, the class is added and removed (e.g on first click, the class could be added - then on second click, the class could be removed, etc).
I have been asked to do this particular task specifically in normal JavaScript. While I know that jQuery would be the easier option, I have been asked to undertake this task with just normal JavaScript.
When I press the button, the css class is being applied as expected (here, the font-family, font-size, and the font-stretch properties are being altered); however, when I click on the button the second time, nothing changes (e.g the class being removed), and everything going back to normal.
If anyone can point me towards a non-jQuery way of adjusting my current code, let me know.
Thanks for your help :).
Here is the relevant HTML, CSS, and JavaScript for this task:
HTML:
<ul id="newZealandList">
<li>Auckland</li>
<li>Wellington</li>
<li>Christchurch</li>
<li>Tauranga</li>
<li>Dunedin</li>
</ul>
<ul id="usaList">
<li>Los Angeles</li>
<li>San Francisco</li>
<li>San Diego</li>
<li>Denver</li>
<li>Boulder</li>
</ul>
<button id="modifyListsToggle">Change Lists - Toggle</button>
CSS:
.modifyListElements{
font-family:"Comic Sans MS", cursive;
font-size:24px;
font-stretch:extra-expanded;
}
JavaScript
var newZealandListItems = document.getElementById("newZealandList").getElementsByTagName("li");
var usaListItems = document.getElementById("usaList").getElementsByTagName("li");
function addClass(obj)
{
obj.className="modifyListElements";
}
function removeClass(obj)
{
obj.className = "";
}
function toggleClass()
{
for (var i = 0; i < newZealandListItems.length; i++) {
if(i.className != "modifyListElements") {
//newZealandListItems[i].className = "modifyListElements";
addClass(newZealandListItems[i]);
}
else
{
//newZealandListItems[i].className = "";
removeClass(newZealandListItems[i]);
}
}
for (var i = 0; i < usaListItems.length; i++) {
if(i.className != "modifyListElements") {
//usaListItems[i].className = "modifyListElements";
addClass(usaListItems[i]);
}
else
{
//usaListItems[i].className = "";
removeClass(usaListItems[i]);
}
}
}
var modifyListsToggle = document.getElementById("modifyListsToggle");
modifyListsToggle.onclick = toggleClass;
Issue is here
for (var i = 0; i < newZealandListItems.length; i++) {
if(i.className != "modifyListElements") {
//con....
and here
for (var i = 0; i < usaListItems.length; i++) {
if(i.className != "modifyListElements") {
//con....
i is just the loop counter variable, you need to use it access the item at that index so should be
for (var i = 0; i < newZealandListItems.length; i++) {
if (newZealandListItems[i].className != "modifyListElements") {
//con..
and
for (var i = 0; i < usaListItems.length; i++) {
if (usaListItems[i].className != "modifyListElements") {
//con..
On another note, this code will potentially have an issue if multiple classes are used, as the .className property will return all the classes on an element. If that may be an issue in the future, I would pursue using a className.replace('modifyListElements','') for remove (that way it will only remove that class and not other ones if there). And the tests for one class on className will also not work if multiple classes are there. In this case pursuing a test and then a .replace would probably be the solution.
A small bug in your code checking classname . I modified your code it working fine . Please check it
http://jsfiddle.net/kRva7/ .
var newZealandListItems = document.getElementById("newZealandList").getElementsByTagName("li");
var usaListItems = document.getElementById("usaList").getElementsByTagName("li");
function addClass(obj)
{
obj.className="modifyListElements";
}
function removeClass(obj)
{
obj.className = "";
console.log(obj.className);
}
function toggleClass()
{
for (var i = 0; i < newZealandListItems.length; i++) {
var item = newZealandListItems[i];
if(item.className != "modifyListElements") {
//newZealandListItems[i].className = "modifyListElements";
addClass(item);
}
else
{
//newZealandListItems[i].className = "";
removeClass(item);
}
}
for (var i = 0; i < usaListItems.length; i++) {
var item = usaListItems[i];
if(item.className != "modifyListElements") {
//usaListItems[i].className = "modifyListElements";
addClass(item);
}
else
{
//usaListItems[i].className = "";
removeClass(item);
}
}
}
var modifyListsToggle = document.getElementById("modifyListsToggle");
modifyListsToggle.onclick = toggleClass;
The easiest way you could do this (although IE support is problematic) is like this:
var btn = document.getElementById('modifyListsToggle'),
lists = document.querySelectorAll('ul');
btn.addEventListener('click', function(e) {
for(var i = 0; i < lists.length; i++) {
var items = lists[i].querySelectorAll('li');
for(var j = 0; j < items.length; j++) {
items[j].classList.toggle('modifyListElements');
}
}
}, false);
demo
querySelectorAll() is only supported by IE8+
addEventListener() is only supported by IE9+
classList is only supported by IE10
I have a Checkbox list. On the load of a page i want my first checkbox true and others are disable.I need to check only one checkbox from checkbox list and others should be disable.If use unchecked the checked checkbox then others should be enable means allowed only one check box checked.
My javascript code is here but on the load of page its not checked the first checkbox, also i want the id of each checkbox while using checkboxlist.
function CheckOptions(CheckBoxList) {
var checkboxlist = document.getElementById('CheckBoxList1');
var checkedCount = 0;
var options = CheckBoxList.getElementsByTagName('input');
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
checkedCount += 1;
}
}
if (checkedCount > 0) {
for (var j = 0; j < options.length; j++) {
if (!options[j].checked)
options[j].disabled = true;
} }
else {
for (var k = 0; k < options.length; k++) {
options[k].disabled = false;
}
}
}
If you're only wanting one checked at a time, it sounds like a group of radio buttons would better serve your purposes.
$(function() {
var checkboxes = $("input[type=checkbox]");
// select the first one on load
checkboxes.eq(0).attr("checked", "checked");
checkboxes.each(function(i, e) {
if (i > 0) {
$(e).attr("disabled", "disabled");
}
})
// handle further selections:
checkboxes.click(function() {
if ($(this).attr("checked")) {
var t = this;
checkboxes.each(function(i, e) {
if (e != t) {
$(e).attr("disabled", "disabled");
}
});
} else {
checkboxes.attr("disabled", null)
}
});
});