javascript - 在 RadioButton 列表单击事件上显示确认消息框

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/

这只是我认为你正在做的事情的简化版本。转换它应该不会太难。我在 fiddle 中留下了很多评论。

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!");
    }
});