jQuery移动对齐在隐藏/显示文本框时会导致双重选择

我有三个文本框，每个文本框下面都有内容，结构如下：

<div id="RadioText">
    <input type="checkbox" name="Response" id="Text" />
    <label>label text</label>
</div>
<div>Text related content</div>
<div id="RadioPhone">
    <input type="checkbox" name="Response" id="Phone" />
    <label>label text</label>
</div>
<div>Phone related content</div>
<div id="RadioEmail">
    <input type="checkbox" name="Response" id="Email" />
    <label>label text</label>
</div>
<div>Email related content</div>

为此：

[ X ] Phone Phone Number: _________________ 这里有一个

我在复选框content div和container div中添加了一些类，并在复选框div中移动了content div。在这之后，您可以使用一个变更处理程序，并在选中为TRUE且仅当所有3个都为false时进行响应

如果全部3个都未选中，则显示所有复选框div，并隐藏所有内容div。 如果选中其中一个，则隐藏同级，并显示本地内容div

<div id="RadioText" class="checkDIV">
    <input type="checkbox" name="Response" id="Text" class="checkClass" />
    <label for="Text">label text</label>
    <div id="TextContent" class="contentDiv">Text related content</div>
</div>

<div id="RadioPhone" class="checkDIV">
    <input type="checkbox" name="Response" id="Phone" class="checkClass"/>
    <label for="Phone">label phone</label>
    <div id="PhoneContent" class="contentDiv">Phone related content</div>
</div>

<div id="RadioEmail" class="checkDIV">
    <input type="checkbox" name="Response" id="Email" class="checkClass"/>
    <label for="Email">label email</label>
    <div id="EmailContent" class="contentDiv">Email related content</div>
</div>

$(document).on("pageshow", "#page1", function() {   
    $(".contentDiv").hide();   
    $(".checkClass").on("change", function(){
        var IsChecked = $(this).prop("checked");
        if (IsChecked){
            $(this).parents(".checkDIV").siblings("div.checkDIV").hide();
            $(this).parents(".ui-checkbox").siblings(".contentDiv").show();
        } else {
             //if none checked reset
            if ($(".checkClass:checked").length == 0){
                $(".checkDIV").show();
                $(".contentDiv").hide();
            }
        }
    });
});

标签文本
与文本相关的内容
标签电话
电话相关内容
标记电子邮件
电子邮件相关内容
$（document）.on（“pageshow”，“#page1”，function（）{
$（“.contentDiv”）.hide（）；
$（“.checkClass”）.on（“更改”，函数（）{
var IsChecked=$（this）.prop（“checked”）；
如果（已检查）{
$（this）.parents（“.checkDIV”）.sides（“.div.checkDIV”）.hide（）；
$（this）.parents（“.ui复选框”）.sides（“.contentDiv”）.show（）；
}否则{
//如果未选中，则重置
if（$（“.checkClass:checked”）.length==0）{
$（“.checkDIV”）.show（）；
$（“.contentDiv”）.hide（）；
}
}
});
});

您使用的是什么版本的jQm？使用

.prop（）

而不是

.attr（）

。试着做一个JSFIDLE来澄清这个问题。我使用jQuery Mobile 1.3.2和jQuery 1.8.2，使用prop（）编辑，但是没有任何区别。我不建议在jqm中使用

.show（）

/

.hide（）

，而是使用一个自定义类，其中包含

display:none。如果有任何更改，请尝试使用
.trigger（“updatelayout”）在该小提琴中所做的更改。我不知道这是否是你想要的。如果你想通过电话访问它，我可以创建一个JSFIDLE。此代码在pc上正常工作-在Nexus平板电脑上正常工作-在Dell XT2触摸屏上正常工作。正如我在安卓手机上发布的文章所述。等待iPhone测试。看起来很棒！处理这个问题的聪明方法。在Android上试用，效果很好。将此代码合并到页面中并将报告。不幸的是，尽管您的代码更加优雅和高效，但它并没有解决问题。不过，它在JSFIDLE上似乎可以正常工作，所以可能与jQuery移动版有关。实际页面位于[链接]是检查的“增强”范围，还是底层输入？如果是输入，请尝试添加CSS:input.checkClass{display:none；}。我们也可以尝试z-index，即使visible div具有最高的z-index…我已经用这些更改更新了我的fiddle，并按照Omar的建议使用了一个hide类（还添加了stopPropagation（））：第一个JSFIDLE代码在我的Android测试手机上运行良好，但在实际页面上没有。jqm 1.4和1.3.2中可能存在差异。我认为问题在于JQM1.3.2和Android 2-3。适用于Dell XT2 touch笔记本电脑和Nexus 7平板电脑。问题似乎是隐藏文本复选框直接出现在最后一个未选中复选框的下方。也许你有一些关于z指数的东西。我会更新我的代码。另一种选择是删除两行将说明文本置于表单顶部的复选框，而不是文本上方的复选框。工作，但不喜欢隐藏文本。你的最新版本在大多数情况下都能工作。但也有一些小故障——大约50%的情况下，在第一次到达页面并选择文本按钮时，内容会出现和消失。在其他情况下，文本内容可能会显示为未选中复选框。然而，其他时候，同样的原始问题也会发生。
<div id="RadioPhone">
    <input type="checkbox" name="ResponseType" id="RespondPhone" value="RP" />
    <label for="RespondPhone">Phone</label>
</div>
<div id="RespondPhoneContent" style="display:none;">
    <div style="width:56%; float:left;">
        <div class="Label">Phone Number:</div>
        <div class="Input">
            <input type="Number" class="Phone" name="Phone" id="Phone" />
        </div>
    </div>
    <div style="width:25%; display:inline-block; margin-left:10px;">
        Ext:<br />
        <input type="text" name="Ext" />
    </div>
</div>

$(document).on("pageinit", "#CabNow", function ()
{
    $("#RespondPhone").bind ("change", function (event) {
        if($("input#RespondPhone").attr ("checked"))
        {
            $("#RespondPhoneContent").show();
            $("#RadioText").hide();
            $("#RadioEmail").hide();
            $('#Phone').focus();
        }
        else
        {
            $("#RespondPhoneContent").hide();
            $("#RadioText").show();
            $("#RadioEmail").show();
        }
    });
});

<div id="RadioText" class="checkDIV">
    <input type="checkbox" name="Response" id="Text" class="checkClass" />
    <label for="Text">label text</label>
    <div id="TextContent" class="contentDiv">Text related content</div>
</div>

<div id="RadioPhone" class="checkDIV">
    <input type="checkbox" name="Response" id="Phone" class="checkClass"/>
    <label for="Phone">label phone</label>
    <div id="PhoneContent" class="contentDiv">Phone related content</div>
</div>

<div id="RadioEmail" class="checkDIV">
    <input type="checkbox" name="Response" id="Email" class="checkClass"/>
    <label for="Email">label email</label>
    <div id="EmailContent" class="contentDiv">Email related content</div>
</div>

$(document).on("pageshow", "#page1", function() {   
    $(".contentDiv").hide();   
    $(".checkClass").on("change", function(){
        var IsChecked = $(this).prop("checked");
        if (IsChecked){
            $(this).parents(".checkDIV").siblings("div.checkDIV").hide();
            $(this).parents(".ui-checkbox").siblings(".contentDiv").show();
        } else {
             //if none checked reset
            if ($(".checkClass:checked").length == 0){
                $(".checkDIV").show();
                $(".contentDiv").hide();
            }
        }
    });
});