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");