Situation
I have a grid with a lot of information. At the beginning of every new line there's a checkbox.
Aim
Click on a checkbox and it will be checked. Click on the same checkbox again and it will still be clicked, however the icon is different. Once you click a third time onto the box it will go into unchecked.
Problem
I am able to do get the checkbox checked and unchecked, however I don't know how to only change the icon after my checkbox is already checked.
Let's take this as an example.
In the example only input type="checkbox" is used and not the whole grid. It would be an overkill for the question.
How would I go from unckecked (green background) -> checked 1 (red) and then -> checked 2 (random color)?
I might imagine this to be a simple and noobish task, but I'm kinda struggling with it.
You can use the :indeterminate CSS pseudo-class selector to style your checkbox while it was in indeterminate state as you asked.
Reference Link: https://tympanus.net/codrops/css_reference/indeterminate/
First, you have to create a custom checkbox, refer to the following page
How to create custom checkbox
Then, add your custom js to that custom checkbox. Hope this help
Related
I have recently come across the :checked function in javascript for radio buttons and I really wanted to use it with normal buttons. Is there any alternatives that I can use to mimic the effect of the :checked function. I have heard of using hidden states before. Basically, I want to retrieve the value of the button when clicked and only the button that I clicked value has to be received. Could anyone give some suggestions? Thanks.
Listen for a click event on the button and then the value is available with .value
document.getElementById("myBtn").value
That said... It's not great UX to use buttons to store a value. The expected process is to use buttons to do something with a group of data. Eg: "save", "submit", "update"
If I understand your question correctly, you can mimic the effect of the :checked attribute by adding classes to your buttons upon being clicked, since this is not available in buttons. You can add a class such as "checked" once the button is clicked, and when retrieving the value, just check whether the button contains this class. Just an idea.
I'm trying to create (what I thought) was a basic Scheduler component for a current project.
EDIT: I have found my own solution, and the answer is provided below. Bonus for any help solving the select all features, which I have shelved for the moment :)
tldr;
Question: Why if I pass in a disabled row, enable it, and begin to edit, that row becomes disabled? If I enable all rows OnInit, everything works as expected.
Editor StackBlitz: Editor StackBlitz for Angular FormArray Table
App StackBlitz: App Stackblitz for Angular FormArray table
The goal is to allow a user to select and/or deselect specific days or time ranges within a form. If that column or row is selected, then their elements will toggle their 'active' state.
So, I toggle the Sunday column and Morning Row. Only the value pertaining to Sunday and Morning time ranges will be active.
I'm using *ngIf or hidden to hide elements from the user, so they cannot edit. If the form input is active, then they can view it an edit that field.
However, the issue comes when I initialize my form with rows that aren't active. So, I have the Morning Row active ngOnInit, and then the user can toggle rows once the state initializes.
When those disabled rows are enabled, and a user begins to edit, that row's active state disables. This is where I'm confused. I'm in the weeds and I can't seem to locate the issue.
After debugging, I have solved my issues. For anyone who runs into a similar use case, my solution involved how I handled setting the active states on toggling the FormControl's values.
Previously I was toggling active values through Angular's getter function:
[FormControl].value.[ActiveFormField] = !active_state
Which wasn't updating the form's proper values.
Instead, I needed to set the values as such:
[FormControl].value.[ActiveFormField].setValue(!active_state).
By setting the value, the form was then properly updated, and my toggle states performed as expected.
I also cleaned up the nested for-loops I referenced; however, I still need to tackle select all and deselect all states.
I have an HTML table (that gets its data from a database, but thats besides the point) that has a checkbox for each row. Is ther an easy way to allow the user to check the checkbox by clicking anywhere in the row, rather than the checkbox itself? I know this can be done using javascript, but is there an easy way to do it in rails? Anyone know of any gems or tutorials online?
Here's a working jsfiddle example: http://jsfiddle.net/3XZvV/2/
It uses the first checkbox in each table row. Put them in any <td>. You can show the checkboxes, but you'll need to modify it to allow them to be clicked -- this design doesn't accommodate for clickable checkboxes since it fires the event when anything in that table row is clicked. (It was good enough for this question, but we're open to improvements.)
Here's the JavaScript to accomplish this:
$('.clickable tr').click(function() {
var c = $(this).find(':checkbox').filter(':first');
c.attr('checked', !c.attr('checked'));
$(this).toggleClass('selected');
});
Just put class="clickable" on your table. In order to make it obvious that you can interact with rows, some CSS is nice. See the fiddle.
You'd have to use JavaScript. It's actually no that hard. Just add a click event for each TR that toggles the checked="checked" state of the checkbox, and changes the background color of the TR as well to show that it has been selected.
As a further enhancement, you could remove the checkbox altogether and use a hidden field instead, to save visual space. Just be sure your users are aware that the table rows are selectable.
This question already has answers here:
Use images instead of radio buttons
(10 answers)
Closed 8 years ago.
I want the functionality of a radio button, yet have the option of choosing based on an image. For example, I am going to have a label (Payment Methods). I would like to set up various DIV/Images with each accepted payment (Credit/card, PayPal, western union, etc). Instead of choose a small little circle radio button, id rather them just click the image and have a border or an image change to indicate that method has been chosen.
It would be even better yet if I could have this functionality with a DIV element, that way I can add just put whatever I want in the DIV (text, images, etc) and have the DIV itself have some sort of border that appears on selection.
Is this possible using input type=radio? If this isn't possible using radios, than how you would suggest the implementation of this? If this has been implemented please link :)
It is not possible to directly style the checkbox or radio button, however, what I do in these situations is I make my own custom checkbox, using jQuery, and based on the user selection, I do one of two thigs:
1) Change the value of a hidden field,
2) Change the value of a checkbox that DOES exist, but that is not displayed to the user, so display:none; would be applied to it.
It is quite simple, make you checkbox out of a div even, lets say 15px high and 15px wide, and bind click events to it using jQuery. You can then toggle the class each time it is clicked, which in turn gives you freedom over styling it, and based on the class or click state, you can assign the actual checkbox value to your hidden field or hidden check box.
Does this help?
A good resource for this is:
http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/
Or if you'd have a plug-in do the work:
http://plugins.jquery.com/taxonomy/term/1360
Instead of having the typical disks with labels to the right, I want the options to be presented as clickable buttons. The selected option should appear to be pushed or pressed in.
I want to do this in HTML, but an example of this are the top left buttons in the program Audacity where you select the cursor/tool mode.
What's the best way to do this?
(source: freemusicsoftware.info)
There are a number of JavaScript plugins for doing this:
Prototype demo
Just replace the images they're using with your images and you should be good to go.
Probably the best way is to create a real radio button, and then control the rendering of an element based upon the status on the radio button with javascript. If the radio button is selected, render background-a, else background-b (or use a sprite). Control the status of the radio button via the click event of your custom element.
Using this jQuery UI plugin, you can customize radio buttons and/or checkboxes to look however you want.