JavaScript与jQuery操作常用的输入元素

以下代码的测试环境为:jQuery-2.1.4,IE 11,FireFox 40。

1. text

  • 取值与赋值
    /*   原生JS   */
    var txtInput = document.getElementById("txtInput");
    var value = txtInput.value;
    txtInput.value = "new value";
    
    /*   jQuery   */
    var $txtInput = $("#txtInput");
    var value = $txtInput.val();
    $txtInput.val("new value");

2. checkbox

  • 是否选中
    /*   原生JS   */
    var chkInput = document.getElementById("chkInput");
    var isChecked = chkInput.checked; //返回boolean
    
    /*   jQuery   */
    var $chkInput = $("#chkInput");
    //attr只能获取checkbox初始化时是否选中,选中为"checked",否则为undefined
    var isChecked = $chkInput.attr("checked");
    //下面两种方法都能动态获取checkbox是否选中,返回boolean
    isChecked = $chkInput.is(":checked");
    isChecked = $chkInput.prop("checked");
  • 选中/取消选中
    /*   原生JS   */
    var chkInput = document.getElementById("chkInput");
    chkInput.checked = true;
    
    /*   jQuery   */
    var $chkInput = $("#chkInput");
    $chkInput.attr("checked", true);
    $chkInput.prop("checked", true);

3. radio

  • 选中/取消选中
    /*   原生JS   */
    document.getElementById("radio1").checked = true;
    
    /*   jQuery   */
    $("#radio1").attr("checked", true);
  • 获取选中项的值
    /*   原生JS   */
    var radioInputs = document.getElementsByName("radio");
    var value;
    for (var i = 0; i < radioInputs.length; i++) {
        if (radioInputs[i].checked) {
            value = radioInputs[i].value;
        }
    }
    
    /*   jQuery   */
    var $checkedRadio = $("input:radio[name=radio]:checked");
    var value = $checkedRadio.val();

4. select

  • 获取选中的值与文本
    /*   原生JS   */
    var selInput = document.getElementById("selInput");
    var val = selInput.value;
    var text = selInput.options[selInput.selectedIndex].text;
    
    
    /*   jQuery   */
    var $selInput = $("#selInput");
    var val = $selInput.val();
    var text = $("#selInput option:selected").text();
  • 通过选项值或者选项文本设置选中/取消选中
    /*   原生JS   */
    var selInput = document.getElementById("selInput");
    //选中值为test的选项
    selInput.value = "test";
    //选中显示文本为test的选项
    for (var i = 0; i < selInput.options.length; i++) {
        //text为选项的显示文本,value为选项的值
        if (selInput.options[i].text === "test") {
            selInput.options[i].selected = true;
            break;
        }
    }
    
    /*   jQuery   */
    //选中值为test的选项
    $("#selInput").val("test");
    //选中显示文本为test的选项
    $("#selInput option").filter(function () {
        return $(this).text() === "test";
    }).attr("selected", true);
  • 新增/删除选项
    /*   原生JS   */
    //新增
    var selOptions = document.getElementById("selInput").options;
    var newOption = new Option("testText", "testValue");
    selOptions.add(newOption);
    //删除
    for(var i = 0; i < selOptions.length; i++) {
        if(selOptions[i].text === "test") {
            selOptions.remove(i);
            break;
        }
    }
    
    /*   jQuery   */
    //新增
    var $newOption = $("<option value='testValue'>testText</option>");
    $("#selInput").append($newOption);
    //删除
    $("#selInput option").filter(function() {
        return $(this).text() === "test";
    }).remove();
  • 清空选项
    /*   原生JS   */
    document.getElementById("selInput").options.length = 0;
    
    /*   jQuery   */
    $("#selInput").empty();
     

相关推荐