复选框和单选框的理解

html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。

当 type="radio" 时，控件为单选框

当 type="checkbox" 时，控件为复选框

了解下input标签的checked属性：

checked 属性是一个布尔属性。

checked 属性规定在页面加载时应该被预先选定的 <input> 元素。

checked 属性适用于 <input type="checkbox"> 和 <input type="radio">。

checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

下面写一个多条件查询复选框的方法，请看下面的例子:

复选框：value：提交数据到服务器的值

<input type="checkbox" class="wu" name="maths" id="daishen" value="待审" />

<label class="you">待审</label>

<input type="checkbox" class="wu" name="physics" id="shenhez" value="审核中">

<label class="you">审核中</label>

<input type="checkbox" class="wu" name="chemistry" id="yishen" value="已审">

<label class="you">已审</label>

Daoimpl类的方法：

if (ds == true)

                     {

                         str+= " or  ga.Status='待审' ";

                     }

                     if (shz == true)

                     {

                         str += " or ga.Status='审核中' ";

                     }

                     if (ys == true)

                     {

                         str += " or ga.Status='已审' ";

                     }

Servlet方法：

String daishen = request.getParameter("maths");

String shenhezhong = request.getParameter("physics");

String yishen = request.getParameter("chemistry");

         boolean maths=true;

         boolean physics=true;

         boolean chemistry=true;

         if (daishen!=null) {

         if (daishen.equals("false")) {

                   maths=false;

         }

         if (shenhezhong.equals("false")) {

         physics=false;

         }

         if (yishen.equals("false")) {

         chemistry=false;

                   }

         }

jQuery判断checked是否是选中状态的三种方法:

第一种：

.attr('checked'); // 返回:"checked"或"undefined" ;

第二种：

.prop('checked') ;// 返回true/false

我用的是第三种：

function searchStudent(){ //搜索的点击事件

var maths = $("# daishen "). is(':checked')  ;

var physics = $("# shenhez "). is(':checked')  ;

var chemistry =$("# yishen ").is(':checked') ; // 返回true/false //别忘记冒号哦

tableSkinDetails.search({maths: maths, physics: physics, chemistry: chemistry });多条件查询的search方法

}

以上任何一种都可以判断checked是否选中，当设置 checked="checked" 时，该选项被默认选中

注意：操作checked、disabled、selected属性，强制建议只用prop()方法！！，不要用attr()方法。

复选框例子：如图1

（如图1）

 

单选框：同一组的单选按钮，name 取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。

下面来看一个例子：

<label class="col-md-4 col-sm-4 control-label reset jin">是否使用：</label>

<input  type="radio" id="shifshiyong01" name="sex" value="1" checked />

<label for="killOrder1">是</label>

<input  type="radio" id="shifshiyong02" class="" name="sex" value="0" />

<label for="killOrder2">否</label>

 

 

获取值：有三种方法

var PlanUse= $("input[name='sex']:checked").val();

第二种：

var PlanUse= $('input:radio:checked').val()；

第三种：

var PlanUse= $("input[type='radio']:checked").val();

 

根据Value值设置Radio为选中值：

if(data.planUse=="0"||data.planUse=="false"){

   $("input:radio[value='0']" ).attr('checked','true');

}else{

    $("input:radio[value='1']" ).attr('checked','true');

  }