JQuery 常用操作之radio和Id Class组合选择器

• 选择器

　　  Id Class 组合选中器

选中Id为form-group-radio 下，并且class是radio-inline btn btn-default center-block的标签并执行每个function内容

• js示例代码

  $("#form-group-radio .radio-inline.btn.btn-default.center-block").each(function(){
  　　//执行内容
  }

• html代码

  <div id = "form-group-radio" class="form-group">
      <div class="col-sm-offset-1 col-sm-5">
          <h4>
              <label class="radio-inline btn btn-default center-block" onclick="radioSimulation('radioPass');">
                  <strong>合格</strong>
              </label>
              <input id = "radioPass" type="radio" name="inlineRadioOptions" style="display:none" value="Pass">
          </h4>
      </div>
      <div class="col-sm-5">
          <h4>
              <label class="radio-inline btn btn-default center-block" onclick="radioSimulation('radioFail');"> 
                  <strong>不合格</strong>
              </label>
              <input id = "radioFail" type="radio" name="inlineRadioOptions" style="display:none" value="Fail">
          </h4>
      </div>
  </div>

• js完整代码

  //模仿radio选项方法
  function radioSimulation(avtive){
      $("#" + avtive).prop("checked",true);
      //显示Error输入框
      if ($("#" + avtive).val() == "Fail"){
          $("#form-group-select").show();
      }else{
          $("#form-group-select").hide();
      }
      $("#form-group-radio .radio-inline.btn.btn-default.center-block").each(function(){
          var next = $(this).next();
          //显示修改选中的背景样式
          if (next.attr("checked")){
              $(this).css("background-color","#4a86e8");
          }else{
              $(this).css("background-color","#fff");
          }
      })
  }

　　  临近节点选中

根据当前已查询出来的节点选择附近的节点

• 　　找当前节点的父元素

  $(this).parent()

• 　　找到所有祖先元素，不限于父元素

  $(this).parents()

• 　　查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙

  $(this).children()

• 　　查找下面的所有内容，包括节点和文本。

  $(this).contents()

• 　　查找上一个兄弟节点，不是所有的兄弟节点

  $(this).prev()

• 　　查找所有之前的兄弟节点

  $(this).prevAll()

• 　　查找下一个兄弟节点，不是所有的兄弟节点

  $(this).next()

• 　　查找所有之后的兄弟节点

  $(this).nextAll()

• 　　查找兄弟节点，不分前后

  $(this).siblings()

• 　　是从元素开始查找  $("p").find("span")是从元素开始找，等于$("p span")

  $(this).find("span")

• 控件

　       radio控件

控件常用判断操作

• 　　设置为选中状态：

  $("#radio").prop("checked",true)

• 　　判断为选中状态：

  if ($("#radio").attr("checked")){
      //执行选中结果
  }else{
      //执行未选中结果
  }

 　　css样式

• 　　改变某个Id为btn的控件的背景色为00FF00

  $("#btn").css("background-color","#00FF00");