In the following Fiddle, you can click to select rows in the table. If you click the 'Execute' button, an alert will tell you if the class .row_selected is visible or not. This is all working, now I need to elaborate on the rows selected part. The user can only 'Execute' one row at a time, so if one row is selected - yay. If more than one are selected, an error message asking to select only one row. One row to rule them all. Any ideas?
http://jsfiddle.net/BWCBX/34/
jQuery
$("button").click(function () {
if ($(".row_selected").is(":visible")) {
alert('Row(s) are selected.')
} else {
alert('No rows are selected.')
}
});
Add a condition with .length see below,
if ($(".row_selected").length > 1) { //more than one row selected
alert('Please select one row');
} else if ($(".row_selected").length) { //one row selected
alert('Row(s) are selected.')
} else { // none selected
alert('No rows are selected.')
}
Seems like the row_selected is applied to the row only on selection so you don't need :visible check.
DEMO: http://jsfiddle.net/7wrJC/
You can use the following code to get the number of the selected rows:
if (1 === $(".row_selected:visible").length) {
// do something
}
Related
I have Checkboxes in DropDown i want to use .each() to check if One the checkBoxes with value=2 were Selected Show Div else hide it.
$("#TypeAnswerQuestionPage").change(function () {
if ($(this).val() == 2) {
$('.QuestionScoreMinMax').show(500);
}
else {
$('.QuestionScoreMinMax').hide(500);
}
});
Have a look at this fiddle link
https://jsfiddle.net/5qwsfepg/2/
In this scenario when you select the second option "Saab" a div that corresponds that choice will be shown. You can of course change and customize as needed but the basic function as follows.
$("div").hide();
$('#select_id').click(function() {
if ($("#select_id option[value=saab]:selected").length > 0) {
$(".saab-div").show();
}
});
So we first hide all the divs and then only show the one you want when the corresponding item it selected in the dropdown.
I have a form with multiple HTML checkboxes. I want to hide some dividers only if at least one checked checkbox have a custom HTML5 attribute called "terminator". Otherwise I would want to show the dividers.
I tried to accomplish this by using the change() event to check if one has the terminator attribute.
Here is what I have done.
$("input[type='checkbox']").change(function(e) {
var className = 'terminated_' + getContronId($(this).attr('name'));
var existingElements = $('#survey-optional-controls').val().split('|') || [];
//Hide all groups that have the class equal to className
if( $(this).is(':checked') ){
if( $(this).data('terminator') ){
hideControls($(this), existingElements, className);
}
} else {
showControls(existingElements, className);
}
}).change();
The function hideControls will hide the desire inputs. The function showControls will display the desired inputs if any are hidden.
My code kinda works, but has one problem that I can't figure out a solution to. The problem happens after checking a box that has the terminator attribute and checking a box that does NOT have the terminator attribute, and then "un-checking" a box that does NOT have the terminator attribute.
When first checking the box with the terminator attribute the dividers hide as expected.
Then when un-checking a box that does not have a terminator attribute it shows dividers that should be hidden with appear since I still have 1 checked box with the terminator attribute.
How can I fix this problem?
I created this jFiddle to show the code and the problem in action. You can re-create the problem by jumping into the "1:b) More Questions" section on the jFiddle, then check the "Red" box and then the "Green - Terminator" box, and finally unchecking the "Red" box. You will see how the dividers below will appear where they should be hidden since "Green - terminator" is still checked"
You should be checking for the "checked" status of the checkbox with data-terminator attribute set on each change.
Something like
$("input[type='checkbox']").change(function(e) {
var className = 'terminated_' + getContronId($(this).attr('name'));
var existingElements = $('#survey-optional-controls').val().split('|') || [];
var isTerminatorChecked = $("input:checkbox[data-terminator='Yes']").is(":checked");
//Hide all groups that have the class equal to className
if (isTerminatorChecked) {
hideControls($(this), existingElements, className);
} else {
showControls(existingElements, className);
}
});
Updated fiddle
To make sure that showControls will only get invoked when the checkbox with the data-terminator attribute gets unchecked,
change this :
...
} else {
showControls(existingElements, className);
}
to
...
} else if ($(this).is("[data-terminator]")) {
showControls(existingElements, className);
}
Updated jsFiddle: http://jsfiddle.net/8yf0v3xt/10/
the code below said 'If any input that have the type checkbox is changing'
$("input[type='checkbox']").change(function(e) { /*hide*/ }
else { /*show*/}
when you uncheck the "red" checkbox this="red", and red is not checked so... it automatically go to the else statment which in to show divider
I placing some xml data in grid using extjs. Now I'm trying to build an update function,
that worked fine, however I'm trying first to extract the data to be updated, so that the user won't have to insert the whole data again.
I managed to extract the data depending on the position in the grid, but not on the selection of checkbox next to each entry in the grid.
Code:
if (btn.id == "btn_update") {
var selection = grid.getSelectionModel().getSelection();
if(selection.length == 0){
alert("Please select an item to update");
}
else if(selection.length > 1){
alert("Please only select one item to update");
}
else{
Ext.getCmp('update_name').setValue(gridStore.getAt(0).get("FirstName"));
Ext.getCmp('update_lastname').setValue(gridStore.getAt(0).get("LastName"));
Ext.getCmp('update_email').setValue(gridStore.getAt(0).get("Email"));
winupdate.show();
}
}
How can I achieve that?
Hope this will help you.
You can use checkboxSelectionModel in grid and when you click on checkbox select event will be fired and that will give you current record, index and many other.
xtype:'grid',
selModel: Ext.create('Ext.selection.CheckboxModel',{
listeners: {
select: function (el, record, index, eOpts) {
//Get current record from record variable
}
}
I want to remove the row where the text is not found, when checkbox unchecked . If checkbox checked, then the table needs to return to its original state . What can you recommend?
function keySearch() {
$('#search').keyup(function (e) {
var search = $(this).val();
$('td').removeClass('found');
$('td').each(function (index, element) {
if ($(element).html() == search) {
$(element).addClass('found');
}
if (!$('#checkbox').prop('checked', true)) {
$(element).parent().hide();
}
else
{
$(element).parent().show();//how replace remove row?
}
});
});
}
Instead of using JavaScript to show and hide the rows, you could use it to add or remove a .checked CSS class on the parent table. Then set up the .found class so that it only hides the rows if the .checked class is present. You'll need to add the .found class to the rows instead of the cells for this to work. Just add .parent() before .addClass('found') in your code. Also, get rid of the code below your first if statement.
Here's what the CSS would look like:
table.checked > * > tr.found {
display: none;
}
Some additional code will be needed to make the checkbox work. Here's how to do it with plain ol' JavaScript (sorry, I don't use jQuery much):
document.querySelector('#checkbox').addEventListener('click', function(e) {
if(e.target.checked)
document.querySelector('#table').classList.add('checked');
else
document.querySelector('#table').classList.remove('checked');
});
(This assumes that your table has an id of 'table').
Hoping someone could help me with a bit of jquery or javascript. I have some DIV's that contain the values of a checkbox being either "1" or "0" depending on whether I check the box or not:
<div class="checkbox">1</div> //This is when the checkbox is checked
<div class="checkbox">0</div> //This is when the checkbox is NOT checked
The class for this DIV stays the same whether it is a 0 or a 1 so I need to have a conditional statement that says,
"If the contents of the DIV is 1 then show it"
AND
"If the contents of the DIV is 0, then hide it"
Would this be simple to do?
A filter would come in handy for such case..
$('.checkbox').filter(function () {
return $(this).text() == 0;
}).hide();
I would do it differently.
$("input#checkbox").change(function(){
$("div.checkbox").toggle(this.checked);
});
Considering that your checkbox is the one that it is altering the content of the <div> anyways.
Any time a checkbox is changed, look at your divs with class checkbox and if they have 1, show, else hide.
$('input[type="checkbox"]').on('change', function() {
$('.checkbox').each(function(){
if($(this).text() === '1'){
$(this).show();
}else{
$(this).hide();
}
});
});
If i have to do it then i would love to do in this way: http://jsfiddle.net/P2WmG/
var chktxt = $.trim($('.checkbox').text());
if (chktxt == 0) {
$('#checkbox').hide();
} else {
$('#checkbox').show();
}
You can use the :contains() Selector to select the divs based on their contents.
$('div.checkbox:contains("1")').show();
$('div.checkbox:contains("0")').hide();