I'm working on building a custom web-survey interface. It is a bit ad-hoc. I am not familiar with the many web technologies out there, so I just scrap together whatever bits of stuff I can find.
The latest feature request were words that act as checkboxes--users can click on words in a sentence and the words would react with toggle behavior and change visually to reflect being checked or unchecked.
The end result is small and pretty simple but it took me a while to nail down the correct syntax exactly. For the event handling I used jQuery. It could have easily have been done without it but the code is a lot cleaner this way at least.
STEP 1:
Make the word technically a checkbox (but without any sort of visual response to clicks).
First the text and checkbox.
<body>
<label for="1">
<input type="checkbox" name="some name" id="1" value="whatever"/>
today
</label>
</body>
The <label> tag ties together the checkbox and the text. Note that "for" and "id" need to have the same value. Now if someone clicks "today" the associated checkbox will be marked.
Next, you need to set the checkbox to invisible and underneath/on top of the text:
<style type="text/css">
label input {
position: absolute;
visibility: hidden;
}
</style>
That's it!
STEP 2:
Now we want to make the checkbox respond visually when they are clicked. There is a way to do this in regular javascript but I couldn't figure out a clean way to do this for multiple checkboxes. Instead, I'm using jQuery
<script>
$(document).ready(function(){
$('input[type=checkbox]').click(function(){
$(this).closest("label").css({ color: this.checked ? "red":"black"});
});
});
</script>
From what I understand, this code is listening for any changes to a state in the checkboxes. It then looks for the nearest label (each checkbox is encapsulated in a label) and toggles that labels text color between red and black. You could imagine other, more sophisticated changes but that is the basic idea.
And that is it. The actual code has more complicated behavior than this but this is the basic idea.
The latest feature request were words that act as checkboxes--users can click on words in a sentence and the words would react with toggle behavior and change visually to reflect being checked or unchecked.
The end result is small and pretty simple but it took me a while to nail down the correct syntax exactly. For the event handling I used jQuery. It could have easily have been done without it but the code is a lot cleaner this way at least.
STEP 1:
Make the word technically a checkbox (but without any sort of visual response to clicks).
First the text and checkbox.
<body>
<label for="1">
<input type="checkbox" name="some name" id="1" value="whatever"/>
today
</label>
</body>
The <label> tag ties together the checkbox and the text. Note that "for" and "id" need to have the same value. Now if someone clicks "today" the associated checkbox will be marked.
Next, you need to set the checkbox to invisible and underneath/on top of the text:
<style type="text/css">
label input {
position: absolute;
visibility: hidden;
}
</style>
That's it!
STEP 2:
Now we want to make the checkbox respond visually when they are clicked. There is a way to do this in regular javascript but I couldn't figure out a clean way to do this for multiple checkboxes. Instead, I'm using jQuery
<script>
$(document).ready(function(){
$('input[type=checkbox]').click(function(){
$(this).closest("label").css({ color: this.checked ? "red":"black"});
});
});
</script>
From what I understand, this code is listening for any changes to a state in the checkboxes. It then looks for the nearest label (each checkbox is encapsulated in a label) and toggles that labels text color between red and black. You could imagine other, more sophisticated changes but that is the basic idea.
And that is it. The actual code has more complicated behavior than this but this is the basic idea.
