单击相同的选中单选按钮后如何清除单选按钮组中的选中的单选按钮

时间:2019-05-16 09:50:29

标签: javascript css reactjs html5

我有2个单选按钮组。

1)包含两个单选按钮 2)包含一个单选按钮组数组,每个组包含3个单选按钮

我想在单击同一单选按钮时清除选中的单选按钮,而无需使用额外的按钮进行清除。

我需要JavaScript代码,因为reactJS不支持jQuery 请帮助我解决这个问题。.我是ReactJS编程世界的新手。

1 个答案:

答案 0 :(得分:0)

我创建了一个样本,可能会对您有帮助

stackblitz中的演示

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:my="http://mycompany.hu/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition >

        <p:dialog id="ProductCreateDlg" widgetVar="ProductCreateDialog" modal="true" resizable="true" appendTo="@(body)" header="#{productController.header}">

            <h:form id="ProductCreateForm" >

                <h:panelGroup id="display" rendered="#{null ne productController.selected}" >
                    <div class="ui-fluid">
                        // here are the input fields
                    </div>

                    <p:commandButton id="save" actionListener="#{productController.save}" value="#{bundle.Save}" update="@([id$=productPanel]),:growl" oncomplete="PF('ProductCreateDialog').hide()" />
                    <p:commandButton value="#{bundle.Cancel}" styleClass="cancelButton" onclick="PF('ProductCreateDialog').hide()" immediate="true"/>

                </h:panelGroup>
            </h:form>
        </p:dialog>
    </ui:composition>
</html>