Question

我在Div中有一个单选按钮列表（radio1，radio2，radio3）。

当我点击其中一个收音机时，我隐藏并显示一个包含一些复选框的div。单击单选按钮我需要确保取消选中已经选中的复选框。

因此，用户可以选择一个单选按钮，并且可以选中与Div相关的复选框。如果用户选择radio2，那么我应该能够取消选中除radio2之外的其他div的所有内容。

我可以使用以下代码实现上述情况。

但问题是： - 假设如果已经检查了radio2，并且用户再次点击radio2：它取消选中radio2的内容。我需要停下来。

我想添加一个确认消息框（确定和取消按钮），每次点击它都会警告用户。如果用户点击取消，那么它应该将状态保持为现有状态。

我已为此编写了一个函数，但它无效。

<div id="radioDiv">                    
    <asp:RadioButtonList ID="radioList" runat="server" >
        <asp:ListItem Value="0" >NewYork</asp:ListItem>
        <asp:ListItem Value="1" >London</asp:ListItem>
        <asp:ListItem Value="2" >Paris</asp:ListItem>
    </asp:RadioButtonList>
</div> 

<div id=nyDiv>
    <asp:CheckBox ID="nycheck1" runat="server" ></asp:CheckBox>
        <asp:CheckBox ID="nycheck2" runat="server" ></asp:CheckBox>
</div>
<div id=ldDiv>
    <asp:CheckBox ID="ldcheck1" runat="server" ></asp:CheckBox>
        <asp:CheckBox ID="ldcheck2" runat="server" ></asp:CheckBox>
</div>
<div id=paDiv>
    <asp:CheckBox ID="pacheck1" runat="server" ></asp:CheckBox>
        <asp:CheckBox ID="pacheck2" runat="server" ></asp:CheckBox>
</div>



function showCity(city) {
    jQuery('#radioDiv input').click(function () {
        //Show confirm message  
        showConfirmMessage('#radioDiv input:radio:checked');

        //Show Hide div
        if (jQuery('#radioDiv input:radio:checked').val() == ) {
            jQuery('#nyDiv').css("display", "block");
            jQuery('#ldDiv').css("display", "none");
            jQuery('#paDiv').css("display", "none");
        }
    }
}


function showConfirmMessage(radioDiv) {
    if (jQuery(radioDiv).val() == 0) {
        var result = confirm("Moving to another city will result in loosing all the existing changes.");
        if (result) {
            return true;
        } else {
            return false;
        }
    }
}

Answer 1

所以你说当点击一个收音机并出现相应的复选框div时，再次点击该收音机会将这些复选框重置为默认值。

如果是这种情况，则无法在第一次单击后添加一个“活动”类或类似的东西，以将单选按钮标记为正在使用。然后当您再次单击它时，请在重置复选框之前检查该单选按钮是否具有活动类。

所以基本上，如果用户尝试再次单击它，则禁用单选按钮，并在单击另一个单选按钮时重新启用它。

请原谅我的代码，我在巴士站。我回家时会给你一个例子。

修改

http://jsfiddle.net/1L34rm96/8/

只是我认为你正在做的简化版。不应该太难将它转换过来。我在小提琴里留下了很多评论。

HTML

<form>
<input class="radios" type="radio" name="r" value="male">r1</input>
<br/>
<input class="radios" type="radio" name="r" value="female">r2</input>
<br/>
<input class="radios" type="radio" name="r" value="male">r3</input>
<br/>
</form>
<div id="checkBoxes">
<input type="checkbox" name="vehicle" value="Bike">I have a bike</input>
<br/>
<input type="checkbox" name="vehicle" value="Car">I have a car</input>
<br/>
<input type="checkbox" name="vehicle" value="Bike">I have a wife</input>
<br/>
<input type="checkbox" name="vehicle" value="Car">I have a stupid fat dog</input>
</div>

JS

$(".radios").on("click", function () {
    if (!$this.hasClass("active")) {
        $(".radios").removeClass("active");
        $this.addClass("active");
        $("#checkBoxes").show();
        alert("I'm not selected, get me check boxes!");
    }else{ 
        //the checkboxes for that radio are currently being displayed
        //don't reset your checkboxes!
        //whatever else needs to be here
        alert("I'm already selected, do nothing!");
    }
});

在单选按钮列表单击事件上显示确认消息框

1 个答案: