I have a table with two columns. And i can't change it. In the left column there are checkboxes, their id's and names are made from this pattern - id="selected[0]" and so on.
In the right column there are only anchor tags with text inside.
I need to check if checkbox next to specific cell with specific text is checked or not.
You can use jquery to find a cell containing a specific text.
e.g. if text is 'hello world' than you can do a search for nodes and go to next element to it like this
var checkBox = $("td:contains('hello world')").next(); // to go to next, use prev() to go to previous element to the cell
var isChecked = checkBox.is(":checked"); // to check if checkbox is checked
Related
I am working on an add-in for Word using Office JS. I have an issue getting the current selected paragraphs items within a Table selection, with a subset of table cells selected. The API only returns the paragraph items of the last selected Table Row.
I would like to get only the specific paragraphs within the currently selected cells.
If the selection is preceded or proceeded with another element, eg. empty paragraph. All paragraphs are returned.
This can be seen by loading paragraphs in selection.
const range = context.document.getSelection();
const paragraphs = range.paragraphs;
range.load('paragraphs');
paragraphs.load();
await context.sync();
console.log('Paragraphs', paragraphs.items);
Is there any workaround to this issue?
i'm creating a shopping list application via javascript/jquery and i'm having trouble using checkboxes to cross off items on the list. i'm getting close though. when a box is checked, all of the items in the list become crossed off, and also the text in the main text-input at the top of the application has the strikethrough quality as well. checking one of the boxes should only strikethrough the corresponding text next to it.
here is my javascript for this particular function:
$('#shopping-list').on('change','input[type=checkbox]',function(){
var input = $(this).parent().siblings('input[type=text]');
$('input').css('textDecoration','line-through');
});
also here is a link for the current version of the application:
https://dl.dropboxusercontent.com/u/91499081/ShoppingList/shoppingList.html
Simple mistake - made it many times myself.
jsFiddle demo
You correctly identify the specific input tag that you want to underline, and you assign that tag to a variable.
But in your next jQuery line, you put the variable name as a string, which tells jQuery that you want to get all elements of that type. Since "input" is a valid type of elements, all input elements are modified.
Therefore, change:
$('input').css('textDecoration','line-through');
To:
$(input).css('textDecoration','line-through');
I would also recommend choosing a different var name. Had you used a different var name, such as "myInput", you may have found the solution yourself.
Per your comment question:
To check/uncheck the text field:
jsFiddle example
$('#shopping-list').on('change','input[type=checkbox]',function(){
var input = $(this).parent().find('input[type=text]');
if ($(this).is(':checked') ) {
$(input).css('textDecoration','line-through');
}else{
$(input).css('textDecoration','none');
}
});
I think you're looking for:
$('#shopping-list').on('change','input[type=checkbox]',function(evt){
var checkbox = $(evt.target),
textInput = checkbox.next('input[type=text]');
textInput.css('text-decoration', checkbox.is(':checked') ? 'line-through' : 'none');
});
You were going up to the parent, then selecting all the input children that were text inputs, instead of only the text right after the check box.
Checking if the checkbox is checked will allow the line through to toggle as the user keeps clicking the box.
Solved by #Grundy, solution at bottom of post
I have a form with a radio option where the elements are selected programmatically and without the user directly clicking on the radio element.
var $elem = $("input[name=type][value^=foo_]"); // Select the element with name "type" where the value starts with "foo_" (assume only one value is ever found)
if ($elem.length > 0) // If element is found then toggle the checked value of the radio value
{
$("input[name=type][checked=checked]").attr("checked", false); // Uncheck all existing checked items
$elem.attr("checked", true); // Check the found element from before
}
This works, I can see the attributes change in Chrome's developer tools. The previous checked input is unchecked and the appropriate item becomes checked. This works every time specifically works multiple times (I'll explain why that's relevant later).
Next I hide all the unchecked radio buttons and show only the checked one.
$("input[name=type] + label").hide();
$("input[name=type]:checked + label").show();
This works the first time an input is selected. All the unchecked inputs will be hidden and the checked one will be unhidden. If the input is selected a second time (either immediately again or after other options have been selected in between) then all of the inputs are hidden including the checked one.
If I check the number of matched elements for $("input[name=type]:checked + label") it returns 1 for the first time and 0 for the second time meaning it won't be selected only after the second time. I feel like this is because the checked attribute has been changed dynamically at that point but that may not be the cause of the problem.
EDIT - Here's a Fiddle
fiddle Clicking on the gray box will show you its normal behavior when changed by the user clicking on the values. Each value can be selected multiple times in any order but if you click the text at the bottom (they're poor looking buttons) it will change the form programmatically. It only works for the first time, it does not seem to care if it was selected by the user previously.
Solution - Credit #Grundy
Since I know the $elem object I found earlier is the object being changed I can reference it directly instead of trying to search for an element with the checked attribute. So I use this:
var $elem = $("input[name=type][value^=foo_]"); // Created before all the changes
$elem.next("label").show(); // Referenced after all the changes
Instead of using this:
$("input[name=type]:checked + label").show(); // Referenced after all the changes
try use
$elem.next("label").show();
instead of
$("input[name=type]:checked + label").show();
because $elem is checked checkbox that you find
I've got a table of cities, ordered by alphabetic order, and I've got another table with the alphabet. I would like to select a letter in this table and fade out the cities who don't begin with this letter, only the cities with this initial.
Could anybody help me?
Actually that's quite simple. Bind an onclick handler (a simple function) to the rows of the alphabet table. In that function, get the clicked letter from the mouse event, iterate through the rows of your city table and check if the city name begins with the clicked letter. You can then either display or hide that row with element.style.display = "block" / "none";
Btw, iterating through tables in JavaScript is simple, you can use this solution:
How do I iterate through table rows and cells in javascript?
I won't post any code for now, you should try to implement something by yourself first.
I have two span's which contain a HTML text box with same id say "field1". Based on a drop down value, only of these two span's are shown in the screen at a given time. Either one of the span's is shown or none of them are shown.
I am using .hide(); and .show(); in prototype js to show and hide these span's based on the drop down value. But whenever I try to get the value by $F('field1'); on submit, I only get the first HTML text box's value(which is empty).
Is there a way I can solve this to get the value of visible HTML text box value?
id should be unique within a page.
I am assuming you have different dropdown values. If so, assign different id's to these spans and use selected dropdown value to pick one of them.
Use class. ID for an element should be unique as it's an ID ;)
select all elements with specified class name. you will get an array of elements having specified class name.
var eleCollection = document.getElementByClassName("anyClassName");
After this, u can loop through this array of elements and get their values
for(element in eleCollection) {
var thisValue = element.getAttribute("value");
console.log("Element: ",element," value: ",value);
}