取id值

时间:2015-11-18 14:17:00

标签: javascript jquery html

我想获取下面内容的id值?

<form id="mainForm"  name="mainForm">
    <input type="radio" id="4" name="rads" value="1" checked>
    <input type="radio" id="3" name="rads" value="2" />
    <input type="radio" id="2" name="rads" value="3" />
    <input type="radio" id="1" name="rads" value="4" />
</form>
<span id="result"></span>
<span id="test"></span>

<script>
    document.mainForm.onclick = function(){
        var radVal = document.mainForm.rads.value;
        var idVal = document.getElementsById('id');
        result.innerHTML = 'You selected: '+radVal;
        test.innerHTML = 'You id: '+idVal;
    }
</script>

您选择的值:1 您选择了id:4

6 个答案:

答案 0 :(得分:1)

你应该做

document.mainForm.onclick = function(){
        var radVal = document.mainForm.rads.value;
        var idVal = document.querySelector('[name="rads"]:checked').id;
        result.innerHTML = 'You selected: '+radVal;
        test.innerHTML = 'You id: '+idVal;
    }

您需要使用document.querySelector('[name="rads"]:checked')选中已选中元素,然后使用.id

获取ID

答案 1 :(得分:0)

使用Jquery,您可以执行以下操作:

var selectedOption = $(':radio[name="rads"]:checked');
var id = $(selectedOption).attr('id');
var value = $(selectedOption).attr('value');

请参阅jsFiddle:http://jsfiddle.net/od5fot5m/

答案 2 :(得分:0)

使用JQuery,这应该得到已检查输入$('input:checked').attr('id')

的id值

答案 3 :(得分:0)

    var inputs = document.getElementsByTagName('input');
    var result = document.getElementById('result');
    var test = document.getElementById('test');


for(i=0; i<inputs.length; i++) {
    inputs[i].addEventListener("click", function(){
       result.innerHTML = 'You selected: '+ this.value;
       test.innerHTML = 'You id: '+ this.id;
    });
  }    

没有jQuery就行。

答案 4 :(得分:0)

一个简单的jQuery示例。

$(function(){   // when DOM is loaded

    $('input[name="rads"]').on('click', function(){ // attaching a click event handler to the input elements with the name "rads"
        if( $(this).is(':checked') )    // If the user clicked radio, is in checked state
        {
            $('#result').text( 'You selected: ' + $(this).val() );  // display its value

            $('#test').text( 'You id: ' + $(this).attr('id') );     // display its ID attribute's name
        }
    });

});

希望它会给你一些想法。

答案 5 :(得分:0)

谢谢大家:) 有一个问题,为什么不在屏幕上打印数据,虽然它被选中了? &#34;检查&#34;

<input type="radio" id="4" name="rads" value="1" checked>

选择了即将进入的选项但无法在屏幕上书写:(