CODEWITHSUNDEEP
javascriptradio-button
yogsma
yogsma

Reputation: 10584

help with javascript function

I have a requirement below and I am struggling with javascript,

In a table I am showing different plans(Medical, Dental, Vision , there can be multiple plans ..I mean Medical 1, Medical 2, Dental 1, Dental 2) and for each plan I am showing radio buttons to either select that plan or waive that plan. Based on their selection, I need to update the amount the people will be paying. So if they select "waive" , the amount would be updated to ZERO. If they select "Select" option, according to plan rate, their amount would be updated. At one time, they can select only one type of a plan.

 Plan        Option                                  Amount
 Medical_1   RadioButton_Elect/RadioButton_Waive     $0.00
 Medical_2   RadioButton_Elect/RadioButton_Waive     $5.00

My problem is with naming those radiobuttons so that user can select only one option at a time. I can name them same and they can be mutually exclusive, but my javascript function to update the amount doesn't update the value correctly then.

function updateAmount(){
  if(document.getElementById('waive0').checked == 'true'){
     document.planselect.planeecost0.value = 0;
  }
}

Upvotes: 0

Views: 70

Answers (1)

Álvaro González
Álvaro González

Reputation: 146460

A radio button group is defined by radio buttons that have the same name. The obvious consequence is that you cannot use the name attribute to tell them out. You need to use something else. Your options include:

  • Read the value tag.
  • Set a different id tag for each button.
  • Identify buttons by their position in the DOM tree.

If unsure, you can go for the id approach, though the value approach is also a valid option.

Upvotes: 1

Related Questions