Customise label when input is inside of it and checked

[lionel-bijaoui]

This stackoverflow resume the issue at hand.
http://stackoverflow.com/questions/13316966/css-checkboxes-radio-buttons-when-input-is-inside-label

Currently, for radios and checklist (at least), it is impossible to do some customization to a checked fields.
For radios, ths current structure is like that:

<div class="radio-list">
    <label>
        <input name="869beac8" value="Yes" type="radio"> Yes
    </label>
    <label>
        <input name="869beac8" value="No" type="radio"> No
    </label>
</div>

I want to change label appearance. I want to put a border around label when input is checked.
Right, now it is impossible.
There is two solutions as far as I can tell:

1. change the structure a bit
2. add some JavaScript behavior

here are the details

1. change the structure

For example, if we add <span> around the text content of the label, we could do that:

<div class="radio-list">
    <label>
        <input name="869beac8" value="Yes" type="radio">
        <span>Yes</span>
    </label>
    <label>
        <input name="869beac8" value="No" type="radio">
        <span>No</span>
    </label>
</div>

and then in css:

input[type=radio]:checked + span {
    color: green;
}

2. JavaScript behavior

While I could pretend to have a single box around both element with the CSS, it is a bit clunky and weak.
What could be better would be to change a class in the parent element.

<!-- At first it's like that -->
<div class="radio-list">
    <label>
        <input name="869beac8" value="Yes" type="radio"> Yes
    </label>
    <label>
        <input name="869beac8" value="No" type="radio"> No
    </label>
</div>

<!-- Then I click "yes" -->
<div class="radio-list">
    <label class="is-checked"><!-- class for the state -->
        <input name="869beac8" value="Yes" type="radio" checked> Yes
    </label>
    <label>
        <input name="869beac8" value="No" type="radio"> No
    </label>
</div>

All I have to do is use this class, and I have much more liberties:

label.is-checked {
    border: 2px solid green;
}

I'm more for the second option and I can do the PR if needed.
What are your thought ?

[icebob]

The second option is better. Please do a PR.

[lionel-bijaoui]

I found a bug on checklist, it don't update the model except the first time. So I listen to model-updated on vfg:

• radios change at every click, and trigger a model-updated event.
• checklist change at the first change, but after that, if I uncheck the checkbox, or if I check another one, nothing get triggered in model-updated.

Do I make a new issue and leave that bug to another PR, or I try to fix it in this PR ?
I honestly have no idea about what is causing that and why the unit test don't reveal that bug.

[icebob]

Please create a new issue about this bug.
In unit tests the events triggered directly, so it can be cause different functioning.

[icebob]

My tip is this part kill the value reactivity. Maybe try change it to Vue.set.