index.html内容如下:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="/static/jQuery/index.js"></script> <p>请输入两个数字</p> <form id="formnum" action="{% url 'aptest:index' %}" > {% csrf_token %} a: <input type="text" id="a" name="a" > <br><br> b: <input type="text" id="b" name="b"> <br><br> <!--定义单选按钮--> sex: <input type="radio" checked="checked" name="sex" value="man" />男 <input type="radio" name="sex" value="woman" />女<br><br><br> <!--定义复选框--> <label><input type="checkbox" name="fruit_all" value="fruit_all" />all checked </label> <br><br> <label><input type="checkbox" name="fruit" value="apple" />apple </label> <label><input type="checkbox" name="fruit" value="pear" />pear </label> <label><input type="checkbox" name="fruit" value="watermelon" />watermelon </label> <br><br> <!--定义下拉列表--> Select one:<select id="car" name="car"> <!--index view通过该name名称得到选择结果--> <option value="Volvo">Volvo</option> <option value="Saab" selected="selected">Saab</option> <!--默认选中--> <option value="Mercedes" disabled="disabled">Mercedes</option> <!--不可选,灰色--> <option value="Audi" title="Audi, your best choice!">Audi</option> <!--鼠标放在上面出现提示信息--> </select><br> <form id="form02" action="{% url 'aptest:index' %}" > {% csrf_token %} <!--定义复选框--> <label><input type="checkbox" id="ccar_all" value="c_all" />all checked </label> <br><br> <label><input type="checkbox" name="ccar" value="c1" />c1 </label> <br><br> <label><input type="checkbox" name="ccar" value="c2" />c2 </label> <br><br> <label><input type="checkbox" name="ccar" value="c3" />c3 </label> <br><br> <input type="button" id='sum' name='sum' value="cacl"> </form><br>
显示如下:
index.js内容如下:
$(document).ready(function(){ $('#ccar_all').click(function(){ //先通过全选复选框的click按钮接收事件,之后才能判断其是否被选中 if(this.checked){ alert(this.value); //获取该复选框的值 //$('#form02-checkbox).attr("checked",'true'); //单个元素设置其为选中状态 //$('#form02 input[name=ccar]').each(function(){this.checked=true;}); //多个元素 $('#form02').find(':checkbox').each(function(){this.checked=true;}); } else{ $('#form02').find(':checkbox').each(function(){this.checked=false;}); } }); });
$('#formnum input[type=button]').click(function(){ //判断是否一个都没有选中 if($('#formnum').find('input[name=fruit]:checked').size() == 0){alert('一个都没选中')} });
其他:
$(document).ready(function(){ $('p').css('color','red') $('.loading').css('display','none') //隐藏名为.loading的类 $('#car').css('color','green') $('#formnum input[type=button]').click(function(){ //alert($('input:radio:checked').val()); //获取单选按钮的值 //var arr=[]; //$('input:checkbox:checked').each(function(){arr.push(this.value);}); #获取复选框的值 //alert(arr[0]); //alert($('#car').val()); //获取下拉列表的值 $.ajax({ type: 'POST', //url: '/aptest/', // data:{ // a:$('#a').val(), // b:$('#b').val() // }, data:$('#formnum').serialize(), dataType:'json', success:function(response,stutas,xhr){ //alert(response); //返回Object Object $('#result').html(response.r1); $('#result2').html(response.r2); //alert(stutas); }, error:function(xhr,errorText,errorStatus){ alert(xhr.status+' error: '+xhr.statusText); }, timeout:500 }); }); $('#form02 input[type=button]').click(function(){ //$('#form02 input[name=ccar]').attr("checked",'true'); //查找该form下所有name=ccar的元素.最好不要通过name查找,因为所有值提交到后台后,还需要使用该name取出相应的值,所以最好将checkall的name区分开来 //$("[name='checkbox']").removeAttr("checked");//取消选中 //alert($('#ccar_all').is(':checked')); //判断该复选框是否被选中 }); $(document).ajaxStart(function(){ $('.loading').show(); }).ajaxStop(function(){ $('.loading').hide(); }); // $('input').click(function(){ //点击按钮后再加载test.js文件,而不是全局调用 // $.getScript('test.js'); // }); });