HTML表单里怎样用JS检查checkbox勾选了并且文本框有内容

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML表单里怎样用JS检查checkbox勾选了并且文本框有内容相关的知识,希望对你有一定的参考价值。

html写的调查问卷,有“其他选项”并且选择“其他选项”有文本框,没有选就没有。
在最后检查是否必答问题都答完的时候要检查“其他选项”的文本框是否显示出来并且有填内容,JS如何实现?

我的实现这部分的代码:
JS部分:
case "text": case "textarea": if (obj.style.dispaly != "none"&&(obj.value == "" || obj.value == null )) alertMsg += " - " + fieldDescription[i] + "\n"; break;

HTML部分:
<div style="width:200px;height:100%" > <div id="qita1_func" class="left"> <label class="center"><input type="checkbox" name="q1_1" id="q1_qita" onclick="checkit1(this,2)" /></label>G其他</div><div id="content_q1" style="display:none;" class="right"><input type="text" id="qita1_text" name="qita1_text" onblur="if (this.value == '' || this.value == null) alert('请输入内容');;"></div> </div></br> </p><script> document.getElementById('qita1_text').focus();</script> <script language="javascript"> function qita_1() var qita1_func = document.getElementById("qita1_func"); var content_q1 = document.getElementById("content_q1"); var qita1_text = document.getElementById("qita1_text"); if(document.getElementById("q1_qita").checked==true) content_q1.style.display = "inline"; else content_q1.style.display = "none"; qita1_func.onclick = function() qita_1();

貌似我就算问卷里填了内容,那个“其他选项”的文本框也会被判定为没有填写的情况无法提交问卷,请问怎么回事?

在运行下面代码之前先要引用jquery。
if($("#id").attr("checked")==true&&$("#id input").val()!='')
这个是用jQuery判断的,其中的id是需要你修改的当然你也可以用class。而这个判断如果直接写在js里因为只判断一次所以当你改变的时候也许会判断错误,在判断之前要交一个复选框改变时间或者文本框改变事件,也就是change()时间。合在一起就是
$("#复选框的id").click(function()
if($("#id").attr("checked")==true&&$("#id input").val()!='')
);
$("#文本框的id").change(function()
$("#复选框的id").click();
);
参考技术A

这是一个jquery的解方案,通过测试

<html xmlns="

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function()
//点击其它时显示
$("#qto").live('click',function()
if(typeof($("#qto").attr("checked"))=="undefined")
$("#qtshow").hide();
else
$("#qtshow").show();

)
$("#checkbt").live('click',function()
var ckit = $("input[name=ckit]:checked").val();
alert(ckit);
if(typeof(ckit)=="undefined")
//没有选任何一个的处理
alert("请选择选项");
else
if(ckit=='c')
//选中其他选项时,通过其它选项的值来判断
if($("#qt").val()=="")
alert("选其它了就要填文本框哦");



)
)
</script>
</head>
<body>
<form action="" method="get">
<input name="ckit" type="checkbox" value="a" />
<input name="ckit" type="checkbox" value="b" />
<input name="ckit" type="checkbox" value="c" id="qto" />
<div id="qtshow" style="display:none"><input type="text" value="qt" /></div>
<input id="checkbt" type="button" value="check" />
</form>
</body>
</html>

追问

您好,非常感谢您的代码,但是我试了下并不能满足我的需求,效果如图,我选了c出现了文本框,但是没有填文本框,提示没有说我没填

参考技术B checkbox的 checked 属性为 true 或者 false true选中 false 未选中 参考技术C 获得checkbox对象.checked方法,返回的boolean类型的值,true选中,false未选中 参考技术D 怎么个没法提交,是不是参数接收错了,取name值,还有那个display,不是dispaly追问

谢谢
我设置了几个必答问题都填完后才能提交,但是如果把那个“其他”的文本框也检查的时候,不管我填没填那个文本框它都判定我没填
display的刚刚提问的时候自己打的,打错了,谢谢提醒

怎样判断一组checkbox中是不是有被选中的?

参考技术A

checkbox是面向对像编程的一个检查框,是否被选中,可要用一个语句示行标示一下即可,如下:

if ($(":checkbox[name=subcheck]:checked").size() == 0)
alert("请至少选择一条记录进行删除操作!");


其中的name是你checkbox的name值
我用的是jquery语法

CheckBox是在HTML中让使用者与首页上的素材发生交互作用的一种方法。其中包含CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭。

以上是关于HTML表单里怎样用JS检查checkbox勾选了并且文本框有内容的主要内容,如果未能解决你的问题,请参考以下文章

angularjs怎么实现checkbox被勾选了才能点击按钮?

ASP怎么用代码来勾选复选框

在js中怎样获得checkbox里选中的多个值?

checkbox二选一的延伸

在js中怎样获得checkbox里选中的多个值?

在js中怎样获得checkbox里选中的多个值?(jQuery)