Hi there,

Can someone tell me how to get more control over the checkbox in a form?

Like how can I implement a extra checkbox with a "other" checkbox that has a textarea.

This is the code from CouchCMS to make a basic Checkbox with a couple of values, how must I change this;

Code: Select all

Select your favorite cartoon characters.
<cms:input type="checkbox" name="toon" opt_values="Goofy | Donald | Bugs Bunny=Bugs | Scooby Doo=Scoob" />

and I have this and it works but can not add a other area with a custom field.

Code: Select all

<label>LABEL</label>   
                  <cms:input type='checkbox' validate='0' required='1' class="form-control" id="ID_AREA" name='NAME' opt_values="OPTION_1 | OPTION_2 | OPTION_3 | OPTION_4" />

And also a explanation with the radio button if that's possible.

Any help?

[KK]

@Kassi, I am sorry but I couldn't understand the problem from your description properly.
Could you please post some (mock) screenshots of what you are after?

Hi @KK,

Just like this http://jsfiddle.net/hungerpain/KqRpM/

When you tap/click the other checkbox a texterea appears.

Now I can only make the checkboxes with couchcms but do not no how to make a checkbox with a other area.

Just found out how to do it

viewtopic.php?p=20156#p20156

just use plain html and hide the couchcms input.

Now a have a different problem, it works all most great but when I check multiple checkboxes the output will only send one of the checked checkboxes. Can someone see what I am doing wrong?

Code: Select all

<div class="form-group ">
                     <label>Type Cleaning</label> 
                  <cms:hide>
                    <cms:input type='checkbox' validate='0' required='1' id="clean" name='clean' opt_values="Cleaning 1 | Cleaning 2 | Cleaning 3 | Cleaning 4 | Other"/>
                  </cms:hide>
                     
                    <div class="checkbox-ds">
                      <input id="clean0" class="clean" type="checkbox" name="clean" value="Cleaning 1" />
                      <label for="clean0" >Cleaning 1</label>

                      <input id="clean1" class="clean" type="checkbox" name="clean" value="Cleaning 2" />
                      <label for="clean1">Cleaning 2</label>

                      <input id="clean2" class="clean" type="checkbox" name="clean" value="Cleaning 3" />
                      <label for="clean2">Cleaning 3</label>

                      <input id="clean3" class="clean" type="checkbox" name="clean" value="Cleaning 4" />
                      <label for="clean3">Cleaning  4</label>

                      <input id="other" class="clean" type="checkbox" name="schoonmaak" value="Other" />
                      <label for="other">Other</label>
                    </div>
                     
                   <cms:if k_error_clean>
                    <p id="clean_error" class="error bg-danger">Please enter...</p>
                   </cms:if> 
                 </div>

And this is the javascript for the other checkbox with text input

Code: Select all

$(".clean").change(function () {
            //check if its checked. If checked move inside and check for others value
            if (this.checked && this.value === "other") {
                //add a text box next to it
                $(this).next("label").after("<input name='clean' id='other-text' placeholder='Please enter...' type='text'/><br/>")
            } else {
                //remove if unchecked
                $("#other-text").remove();
            }
        });

Next time I will be patient, because I found the solution by accident, I must add at the end of the name attribute brackets [ ] of every checkbox.

Code: Select all

name="clean[]"