如何在javascript的模式中隐藏表单

我有一个包含两个表单的模态，我想在选中其中一个单选按钮时在它们之间切换，所以我需要在模态加载中隐藏其中一个，我执行了以下代码，但它没有隐藏，有人能帮我吗？ 需要在模态加载时隐藏的表单称为

LocateOnMap

，以隐藏其所有内容

<div class="modal fade" id="modal-Frm">
<div class="modal-dialog modal-sm" style="width:480px;">
    <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3 class="modal-title">Add New Farmer</h3>
        </div>
        <div class="modal-body">
            <form action="AddNewCustomer.php" method="post" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-sm-4">
                        <label class="Modallabel">Address:</label>
                    </div>
                    <div class="col-sm-8">
                        <label class="radio-inline"><input type="radio" name="optradio">Enter Address</label>
                        <label class="radio-inline"><input type="radio" name="optradio">Locate on Map</label>
                    </div>
                </div>
                <form id="LocateOnMap">
                    <div class="row">
                        <div class="col-sm-4">
                            <label class="Modallabel"></label>
                        </div>
                        <div class="col-sm-8">
                            <div class="input-group input-group-sm" style="margin-top: -5px;margin-left: -15px;">
                                <div class="col-sm-4">
                                    <label class="Modallabel">Latitude:</label>
                                </div>
                                <div class="col-sm-8">
                                    <div class="input-group input-group-sm" style="margin-top: -5px;">
                                        <input id="Latitude" type="text" class="form-control ModalInput" name="Latitude" placeholder="Latitude" style="border-radius: 5px;" readonly >
                                    </div><br>
                                </div>
                                <div class="col-sm-4">
                                    <label class="Modallabel">Longitude:</label>
                                </div>
                                <div class="col-sm-8">
                                    <div class="input-group input-group-sm" style="margin-top: -5px;">
                                        <input id="Longitude" type="text" class="form-control ModalInput" name="Longitude" placeholder="Longitude" style="border-radius: 5px;" readonly >
                                    </div>
                                </div> 
                            </div><br>
                        </div>
                    </div>
                    <div class="row" style="padding: 10px;">
                        <div style="width:100%; height:220px;border:2px solid rgb(16,29,73);" id="Modalfrmmap">
                            <script>
                                initModalfrmmap();
                            </script>
                        </div>
                    </div>
                </form>
                <form id="EnterAddress">
                    <label style="color:red;">Hiii</label>
                </form>
                <script type="text/javascript">
                    $('#LocateOnMap').hide();
                </script>
            </form>
        </div>
        <div class="modal-footer">
            <button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add</button>
            <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" onclick="CancelModal()" style="font-weight: bold;">Cancel</button>
        </div>
    </div>
</div>

&时代；
增加新农民
地址:
输入地址
在地图上找到
纬度：


经度：


initModalfrmmap（）；
Hiii
$（'#LocateOnMap'）.hide（）；
添加
取消

这是为了展示它

这是为了显示它

您不能在

下使用

，因此将其删除而使用

div

。默认情况下，将

hidden

类指定给

LocateOnMap

。然后在

change

事件的

radio

上，您可以使用jquery方法切换

LocateOnMap

和

EnterAddress

的可见性

$（“#模态Frm”）.modal（“show”）；
$（'input[name=optradio]'）。更改（函数（）{
$（“#输入地址，#位置地图”）.toggleClass（“隐藏”）；
});

&时代；
增加新农民
地址:
输入地址
在地图上找到
纬度：


经度：


Hiii
添加
取消
您不能将
放在
下，因此将其删除而使用
div
。默认情况下，将
hidden
类指定给
LocateOnMap
。然后在
change
事件的
radio
上，您可以使用jquery方法切换
LocateOnMap
和
EnterAddress
的可见性


$（“#模态Frm”）.modal（“show”）；
$（'input[name=optradio]'）。更改（函数（）{
$（“#输入地址，#位置地图”）.toggleClass（“隐藏”）；
});

&时代；
增加新农民
地址:
输入地址
在地图上找到
纬度：


经度：


Hiii
添加
取消
在显示.bs.modal上，您可以隐藏表单并设置单选按钮：

$('#modal-Frm').on('show.bs.modal', function (e) {
     $('[data-form-id="#EnterAddress"]').prop('checked', true).trigger('change');
})

我建议为每个name=“optradio”添加一个数据属性，如：

data-form-id="#EnterAddress"

对于第二个问题：

data-form-id="#LocateOnMap"

这样，在收音机切换时，您可以在两种形式之间切换：

$('[name="optradio"]').on('change', function(e) {
     $('#modal-Frm').find('form[id]').hide();
     $(this.dataset.formId).show();
})


$（“#modal Frm”）.on（'show.bs.modal'，函数（e）{
$（'[data form id=“#EnterAddress”]”）。prop（'checked'，true）。trigger（'change'）；
})
$（'[name=“optradio”]'）。关于（'change'，函数（e）{
$（“#模态Frm”）.find（'form[id]”）.hide（）；
$（this.dataset.formId）.show（）；
})
函数CancelModal（）{
}

发射模态
&时代；
增加新农民
地址:
输入地址
定位
data-form-id="#LocateOnMap"

$('[name="optradio"]').on('change', function(e) {
     $('#modal-Frm').find('form[id]').hide();
     $(this.dataset.formId).show();
})