Radio button click event works but not radio button select


#1

I have issue in radio button,I want to call event when radio button click that part works fine but radio button not select.without event call it select.

<ul class="list-group">
        <li class="list-group-item list-group-item-action" repeat.for="product of products" style="padding-left: 50px;">
            <input class="form-check-input" type="radio" name="rad_product" value.bind="product" checked.bind="selectedProduct" click.delegate="clickedProduct(product)"> ${product.ProductName}
        </li>        
    </ul>

#2

Probably you are not returning true in your click.delegate="clickedProduct(product)" by default,
.preventDefault() is call on the event if result of function evaluation is not true


#3

Thank you for your support.
this the way I code

      clickedProduct(selecteditem) {
        this.GetItems(selecteditem);
        debugger;
        this.selectedProduct=selecteditem;    
      }

#4

Can you try

  clickedProduct(selecteditem) {
    this.GetItems(selecteditem);
    this.selectedProduct = selecteditem;
    return true;
  }

#5

I did the same thing but not working so then I comment this line " this.selectedProduct = selecteditem;" then work


#6

This (using checked.bind and a click handler that changes the checked property) is an anti-pattern. You are binding to the value and checked properties of the radio, which updates values automatically.

<input model.bind="product" checked.bind="selectedProduct" />

Clicking sets selectedProduct to product. I don’t know what your this.GetItems function is doing, but you probably want to iterate over those items instead of products and use the default checked behavior.