如何在javascript中获取复选框的值

时间:2013-09-12 18:03:26

标签: javascript jquery

如何以多种方式获取所选复选框的ID,并且不返回值

<div class="form">
    <li id ='preg1'>¿Qué productos de belleza llevas siempre contigo?<br>
        <input type="checkbox" name="vehicle[]" value="hipster" >Bálsamo labial y sombra de un sólo tono.<br>
        <input type="checkbox" name="vehicle[]" value="rocker" >Delineador y esmalte en tonos obscuros.<br>
        <input type="checkbox" name="vehicle[]" value="chic" >El lipstick y las sombras que te quedan increíble y que jamás pasarán de moda. <br>
        <input type="checkbox" name="vehicle[]" value="junkie" >El último lanzamiento de tu marca favorita y el esmalte de uñas que está marcando tendencia<br>
    </li>
    <li id ='preg2'>¿Para una cita cuál es tu look favorito?<br>
        <input type="checkbox" name="vehicle[]" value="hipster">Skinny jeans, maquillaje natural y un accesorio que destaque.<br>
        <input type="checkbox" name="vehicle[]" value="rocker">Chamarra de piel y ojos smoky.<br>
        <input type="checkbox" name="vehicle[]" value="chic">Blusa con olanes y maquillaje en tonos pastel.<br>
        <input type="checkbox" name="vehicle[]" value="junkie">Con las últimas tendencias de pies a cabeza, tanto en outfit como maquillaje.<br>
    </li>
</div>

$(document).ready(function() {
    $('input[type=checkbox]').on('click', function(){ 
      var parent = $(this).parent().attr('id');
      $('#'+parent+' input[type=checkbox]').removeAttr('checked');
      $(this).attr('checked', 'checked'); 
    });
});

http://jsfiddle.net/QSTns/

2 个答案:

答案 0 :(得分:0)

你应该使用单选按钮,因为这是他们的设计目的,改变预期的行为可能会让用户感到困惑和/或烦恼。

现在,如果您有兴趣获取包含已选中复选框的列表项的ID(使用现有代码),请使用此命令:

$('input[type=checkbox]').on('click', function(){
    var parent = $(this).parent().attr('id');
    $('#'+parent+' input[type=checkbox]').removeAttr('checked');
    $(this).attr('checked', 'checked');
    console.log( $(this).parent().attr('id') ); // Gets the ID
});

<强> jsFiddle example

答案 1 :(得分:0)

我认为this将帮助您更好地理解