Jquery中对select/radio/checkbox进行操作的方法

每次都要google,终于搞烦了,统一列在这里记录一下:

  1. select

    对于下面的下拉框

    <select id='selecttest'>
        <option value='v1'>value 1</option>
        <option value='v2'>value 2</option>
    </select>
    
    • 选择v1选项

      $("#selecttest option[value=v1]").attr("selected",true);
      $("#selecttest option[value=v1]").attr("selected","selected");
      
    • 取消选中v1选项

      $("#selecttest option[value=v1]").attr("selected",false);
      $("#selecttest option[value=v1]").removeAttr("selected");
      
    • 读取当前被选中的选项

      $("#selecttest option:selected").val();
      
  2. radio

    对于下面的radio group

    <input type='radio' name='radiotest' value='v1' />
    <input type='radio' name='radiotest' value='v2' />
    
    • 选择v1选项

      $('input:radio[name=radiotest][value=v1]').attr('checked', true);
      $('input:radio[name=radiotest][value=v1]').attr('checked', 'checked');
      
    • 取消选择v1选项

      $('input:radio[name=radiotest][value=v1]').attr('checked', false);
      $('input:radio[name=radiotest][value=v1]').removeAttr('checked');
      
    • 读取当前被选中的选项

      $('input:radio[name=radiotest]:checked').val();
      
  3. checkbox

    对于下面的checkbox

    <input type='checkbox' id='checkboxtest' />
    
    • 选中

      $('#checkboxtest').attr('checked',true);
      $('#checkboxtest').attr('checked','checked');
      
    • 取消选中

      $('#checkboxtest').attr('checked',false);
      $('#checkboxtest').removeAttr('checked');
      
    • 读取选中状态

      $('#checkboxtest').is(':checked');
      

Comments