Linking radio button groups

[critchleysj]

When linking a field with a radio group, after selecting an item the value of all radios in that same radio group change to the same value as the radio that was clicked.

So if I had:

Yes No

after clicking on Yes (true) the value of RegisteredBusiness_1 is changed to "true". This makes it hard/impossible to work linking with radios.

[critchleysj]

I've modified my setValue function to this:

function setValue(target, field, value) {
if (target.nodeType) {
var setter = fnSetters[field] || "attr";
if ($(target).is(':radio')) {
$(target).parents('form').find('radio[name=' + $(target).attr('name') + '][value=' + value + ']').attr('checked', 'checked');
}
else
$(target)setter;
} else {
$(target).data(field, value);
}
}

Not sure if it's broken anything yet... I guess it assumes a form parent. Presumably this will also be a problem for groups of checkboxes. And how does it handle a multi select element?

[jamiemthomas]

The current implementation only supports:

1. Two-way links from an input element to a javascript object (not vice versa or input to input, etc.)
2. Only input type="text", select multiple=false, and textarea elements, unless you use custom converters to perform custom logic

I have a fork demonstrating declarative linking that does support checkboxes, checkbox lists and radio buttons, but I am now working on modifications to datalink itself to support these controls directly.

Your fix is similar to the approach I am taking, but in many cases it is necessary to update the linking code from element to object AND from object to element. Also, I am trying to support both single checkboxes linked to boolean fields and sets of checkboxes linked to arrays of values (two very reasonable common scenarios).

The biggest issue with the link() API right now is it relies exclusively on the val() method. For the line, $(target)setter;, the setter will always be "val" in the current codebase despite indications otherwise. As many have noted on the jQuery forums, val() does not handle checkboxes and radio buttons in an elegant/intuitive way, so it is necessary to implement workarounds as you have suggested.

[busticated]

It might be helpful to others to call out this limitation (limited / no checkbox & radio input handling) in the readme or on the jQuery Plugin API docs.

[sickhippie]

I've got a code hack that works around this. For the following radio button set:

input type="radio" id="type0" name="type" value="1" />
input type="radio" id="type1" name="type" value="2" />

I've added this function in my main include:

$(function(){
    $('input[name="type"]:radio').live('click', function(){
        $('input#type0').val('1');
        $('input#type1').val('2');
    });
});

Essentially (as near as I can tell), this sets the values to their original before the datalink overwrites the values with the values from the object. When you click type0, type0 becomes 1, type1 becomes 2, then type0, type1, and obj.type all become 1. When you click type1, type0 becomes 1, type1 becomes 2, then type0, type1, and obj.type all become 2.

I know it's not an ideal workaround, but since this has been open for 6 months now, hopefully this will help people who come here wonder what's wrong with their radio buttons.

[mydoghasworms]

I had a problem with setField() due to exactly this. So I took the fix from @critchleyjs and adapted it slightly. You can see the result here: http://stackoverflow.com/questions/6071806/setting-radio-buttons-with-setfield-in-datalink-jquery

Thanks critchleyjs!

[mydoghasworms]

OK, and now I added the hack (for radio buttons and checkboxes to a fork).

[mydoghasworms]

Mind you, this hack seems to have broken things. When you now click a checkbox, it stays checked, and you cannot uncheck it :-(

[aw-emberex]

Updated the SO overflow question with my changes that fix this issue. http://stackoverflow.com/questions/6071806/setting-radio-buttons-with-setfield-in-datalink-jquery