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