<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>
我正在尝试实施一个收音机盒,以便当用户点击不完整的radiobox时,它应显示警告。
如果用户点击完整的广播框,则应显示“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);
答案 0 :(得分:2)
你有两个问题:
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>
答案 1 :(得分:2)
您可以通过检查change()
事件并比较复选框的值来执行此操作:
$(function(){
$("#app_box").hide("fast");
$('[name="app_status"]').change(function(){
if (this.value == 'complete') {
alert('complete');
} else {
alert('incomplete');
}
});
});
我创建了一个小提琴here来演示。
答案 2 :(得分:2)
您需要处理无线电上的点击事件:
$(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");
}
});
});
答案 3 :(得分:0)
不检查是否选中了单选按钮,而是检查无线电组的值。
答案 4 :(得分:0)
使用jQuery UI可能会更好,特别是模态框:http://jqueryui.com/demos/dialog/#modal-message