1

I am using a jquery-ui buttonset with 2 radio buttons for yes/no input. 

var yesInput = document.createElement("input");
yesInput.type = "radio";
$(yesInput).attr('id', "njs1");
$(yesInput).prop('checked', this._data);

var noInput = document.createElement("input");
noInput.type = "radio";
$(noInput).attr('id', "njs2");
$(noInput).prop('checked', !this._data);

I am calling a change event, on these buttons and in the handling function trying to detect whether the checked button is clicked. buttonSet is the div that is made into a buttonset().

$("input[type=radio]", buttonSet).change(checkHandler);

var data= $("input[type=radio]", buttonSet).eq(0).is(':checked');

In such a situation, I am expecting that if the second button is clicked, data should return false. My understanding is when I check a radio, it's html is modified to add checked.

However, irrespective of what is being called, data is always true.

What am I doing wrong? How to get the correct value?

Edit:

Example fiddle

As you can see, I can click on No and still have Yes checked. Since it is a radio, I expect it to behave that way

Nihar Sarangi
  • 4,845
  • 8
  • 27
  • 32
  • Can you provide an example of you code on http://jsfiddle.net/ ? – chimurai Oct 16 '15 at 17:30
  • http://jsbin.com/wuhozayevo/edit?html,js,output I am not sure why the buttonset is not rendered as it should be, but that's not the concern since it most likely is specific to jsbin. As you can see, I can click on No and still have Yes checked. Since it is a radio, I expect it to behave that way. – Nihar Sarangi Oct 16 '15 at 18:12
  • Couple of issues: 1) radio input element should have a `name` attribute with the same value so they are linked, to make sure only `yes` or `no` can be selected. 2) I'm seeing a mixed usage of vanilla js and jQuery code; What is the purpose of vanillajs in your code? 3) Not sure what `$(buttonSet).buttonset();` does. It this some jquery plugin? 4) You are loading both jquery 1.x and 2.x in the example. – chimurai Oct 16 '15 at 18:37
  • Thanks. I removed the reference to the old jquery library. I am using vanilla js just because, I have a function that passes the container div which holds the buttonset as an argument. This is why I wanted to keep it as separate as possible. The official jquery-ui documentation suggests using `$(buttonSet).buttonset();` and shows the same in the examples. https://api.jqueryui.com/buttonset/#method-option – Nihar Sarangi Oct 16 '15 at 18:43
  • @chimurai After the changes, it looks as it should. But then, the same issue of both being checked at the same time (Even after adding a `name` attribute) is still there. – Nihar Sarangi Oct 16 '15 at 18:56
  • Both input elements should have to same name attribute, such as: `"name": "togglebutton"`. That should fix the issue. – chimurai Oct 16 '15 at 19:07
  • Thanks. That fixed the issue. – Nihar Sarangi Oct 16 '15 at 19:10

2 Answers2

0

To change to checked state of the input element, you'll have to use to .prop()

Set to checked: $( "input" ).prop( "checked", true );

Set to unchecked: $( "input" ).prop( "checked", false );

http://api.jquery.com/prop/

Previous to jQuery 1.6 .attr did change both the html attribute and dom property.

As of v1.6 this behavior has been changed.

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

Update

Both radio inputs should have the exact same value to group them together.

$(yesInput).attr('id', "njs1"); $(yesInput).attr('name', "toggle"); // << shared name $(noInput).attr('id', "njs2"); $(yesInput).attr('name', "toggle"); // << shared name

chimurai
  • 1,285
  • 1
  • 16
  • 18
0

Why not using jQuery's way of creating elements? use click events for radio buttons.

$('<input/>').attr({type: "radio", "id": "njs1"})
.prop("checked", !this._data)
.click(checkHandler);
Taher
  • 11,902
  • 2
  • 28
  • 44