How to transform a radio input form to radio input

2019-07-29 11:29发布

问题:

Is it possible to transform the next code to bootsfaces labels?

<div class="radio">
    <label><input type="radio" name="optradio"/>Option 1</label>
 </div>
 <div class="radio">
     <label><input type="radio" name="optradio"/>Option 2</label>
 </div>

Thank you!

回答1:

Update July 18, 2016: Inspired by your question, I've started to implement a <b:radiobutton /> component that's more flexible than its standard JSF counterpart. It will be published with the next version of BootsFaces - probably 1.0, which is due to JavaOne 2016. Until then, follow the recipe below.

We didn't implement <b:radioButton />yet, but you can simulate it by adding a hidden input field and some JavaScript code:

  <b:panel title="Survey" look="primary">
    <p>Which Java version do you use?</p>
    <div class="radio">
      <label onclick="$('.hidden-optradio').val(7)">
        <input type="radio" name="optradio" value="7" />
        Java 7
      </label>
    </div>
    <div class="radio">
     <label onclick="$('.hidden-optradio').val(8)">
        <input type="radio" name="optradio" value="8" />
        Java 8
      </label>
    </div>
    <h:inputText value="#{radiobuttonBean.javaVersion}" styleClass="hidden-optradio" pt:type="hidden" />
    <script>$('input[name=optradio][value=#{radiobuttonBean.javaVersion}]').attr("checked", "checked");</script>
    <b:commandButton value="submit your choice" action="#{radiobuttonBean.submit}" look="primary" />
    <b:messages />
  </b:panel>

If you need AJAX, implement it by adding a hidden <b:commandButton update="someRegion" onclick="ajax:myBean.myMethod()" /> and call the click() method of this button in the onclick handlers of the labels:

<label onclick="$('.hidden-optradio').val(8);$(.ajax-button).click();">
  <input type="radio" name="optradio" value="8" />
    Java 8
  </label>
</div>
...
<b:commandButton value="submit your choice" 
                 action="#{radiobuttonBean.submit}" look="primary" 
                 update="@form"
                 style-class="hidden ajax-button"
                 />