# Javascrit/jQ 取值3 Radio單選/Select下拉

----
###### tags: `javascript` `jQuery`

## 目錄
1. 圖
2. checkBox多選
3. Radio單選
4. Select

----

## Radio
Radio正常都是單選

以下不論是那個寫法都是String 不是array
因為是單選所以String並不需要再特別轉成Array
但如果需要Array格式時....

<div class="item form-group">
  <label class="col-form-label col-md-3 col-sm-3 label-align" for="">購買版本</label>
    <div class="ccol-md-6 col-sm-6 ">
      <input type="radio" id="version1" name="version" value="1">
      <label for="version1">數位版</label>
      &nbsp;
      <input type="radio" id="version2" name="version" value="2">
      <label for="version2">光碟版</label>
    </div>
</div>

console.log($('input[name="version"]:checked').val());

console.log($('input[name="version[]"]:checked').val());


### Radio_Array格式

**可以作長度判斷
但此長度為元素數量, 非選擇數量**

console.log(
    $('input[name="version[]"]:checked').map(function(){
        return $(this).val();
    }).get());
                
// 兩種都可以
console.log(
    $('input[name="version"]:checked').map(function(){
        return $(this).val();
    }).get());


## Radio 預設選定

網頁一開起時就選定選項
兩個Radio的差異

<input type="radio" name="imgsel"  value="" checked="checked" /> 



## Radio單選無法取消

在寫公司專案時發現一個怪問題
以此為例

Radio點下去後無法再點一次取消

一班Radio中是多選項選一
但如果只有一個選項, 只是要選或不選的話
Radio是無法典籍第二次取消的

必須自己手寫
決定當練習

<div>
  <input type="radio" id="contactChoice1" name="contact" value="email">
  <label for="contactChoice1">Email</label>

  <input type="radio" id="contactChoice2" name="contact" value="phone">
  <label for="contactChoice2">Phone</label>

  <input type="radio" id="contactChoice3" name="contact" value="mail">
  <label for="contactChoice3">Mail</label>
</div>


### this/\$(this)的不同

this/\$(this) 有另外的筆記

這邊先放code
點擊跟 點擊第二次取消

var $radios = $('input[type="radio"]');

$('input[type="radio"]').click(function(){
    var $this = $(this);

    if ($this.data('checked')) {
        this.checked = false;
    }
    var $otherRadios = $radios.not($this).filter('[name="' + $this.attr('name') + '"]');
    $otherRadios.prop('checked', false).data('checked', false);
    $this.data('checked', this.checked);
})

或是使用簡單的方式實踐

$('input[type="radio"]').click(function(){
    var $radio = $(this);
    if ($radio.data('checked')){
      $radio.prop('checked', false);
      $radio.data('checked', false);
    } else {
      $radio.prop('checked', true);
      $radio.data('checked', true);
    }
})

### jQ.data自定義屬性(未練習)

### !!!請自己練練不要都照抄!!!

[Radio button uncheck on second click](https://stackoverflow.com/questions/19895073/radio-button-uncheck-on-second-click)

使用Data 自定義屬性
[js,jQuery获取html5的\data-*属性](https://segmentfault.com/a/1190000005770912)


## Select

let city = $('#city').val();
let town = $('#town').val();
console.log(city, town);