全选、单选

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');
  // });



});

总结

以上是生活随笔为你收集整理的全选、单选的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。