根据单选按钮值显示警报和复选框答案

【问题标题】：display alert and checkbox based on radio button value根据单选按钮值显示警报和复选框
【发布时间】：2012-03-06 22:52:19
【问题描述】：

<input type="radio" id="incomplete" name="app_status" value="incomplete">Incomplete Application<br>
<input type="radio" id="complete" name="app_status" value="complete">Complete Application<br><br>
<div id="app_box">      
   <input type="checkbox" name="application_complete"  value="checked" />Checbox policy

<br><br>
</div>

我正在尝试实现一个单选框，这样当用户点击不完整的单选框时，它应该显示一个警报。

如果用户点击完整的单选框，它应该显示“application_complete”框，否则隐藏它。

这是我试图在我的 jquery 函数中实现的，我猜我的概念可能有点错误：

<script type="text/javascript">
$(function(){
    $("#app_box").hide("fast");
    if($("#complete").is(':checked')){
        $("#app_box").show("fast");
    }
    elseif($("#incomplete").is(':checked')){
        alert("Application will be incomplete");
        $("#app_box").hide("fast");
    }
});
</script>

谢谢大家.. 我需要对 JREAM 建议的代码稍作修改。如果我选中 application_complete 框，然后单击不完整的单选框，我可以再次取消选中 application_complete 框吗？

没关系。我想通了。

$('input[name=application_complete]').attr('checked',false);

【问题讨论】：

谢谢大家.. 我需要对 JREAM 建议的代码稍作修改。如果我选中 application_complete 框，然后单击不完整的单选框，我可以再次取消选中 application_complete 框吗？

标签： jquery radio-button jqueryform

【解决方案1】：

你有两个问题：

1：您没有事件处理程序，因此它仅在您的页面加载时检查您的表单（并且他们没有选择开始）

2：你做了“elseif”，但在 JS 中它的两个词，所以你的 JavaScript 坏了，做“else if”，这里是解决方案：

<script type="text/javascript">
$(function(){
    $("#app_box").hide();

    $('input[name=app_status]').change(function() {
      var value = $(this).val();
      if (value == 'incomplete') {
        alert('error msg');
      } else if (value =='complete') {
        $('#app_box').show();
    }
});

});
</script>

【讨论】：

【解决方案2】：

您可以通过检查change()事件并比较复选框的值来做到这一点：

$(function(){
  $("#app_box").hide("fast");
  $('[name="app_status"]').change(function(){
    if (this.value == 'complete') {
      alert('complete');
    } else {
      alert('incomplete');
    }
  });
});

我创建了一个小提琴here 来演示。

【讨论】：

【解决方案3】：

您需要处理收音机上的点击事件：

$(function(){
     var $app_box = $("#app_box").hide("fast");

     $(':radio[name="app_status"]').click(function() {
        if (this.value === "complete")
            $app_box.show("fast");
        else if (this.value === "incomplete") {
            alert("Application will be incomplete");
            $app_box.hide("fast");
        }
     });
});

【讨论】：

我会注意到他可能应该用 css 隐藏#app_box，或者至少只使用.hide()。否则，它会在加载时短暂可见，然后消失。

【解决方案4】：

使用 jQuery UI 可能会更好，尤其是模态框：http://jqueryui.com/demos/dialog/#modal-message

【讨论】：

【解决方案5】：

不是检查单选按钮是否被选中，而是检查单选组的值。

【讨论】：

不，它们是按名称链接的。 ID 对任何元素都是唯一的。
不，他们不应该。单选组通过共享名称属性建立 - id 必须是唯一的。