Question

我正在使用jQuery函数来获取已选中复选框的值。

如果不再选中该复选框，如何隐藏span类“active-usb”中的值？

HTML

<span class="active-usb"></span><br>   
<input type="checkbox" id="getusb" value="Halterung für USB-Stick">

Jquery的

$("#getusb").change(function(){
$('.active-usb').text($("#getusb:checkbox:checked").val());  
}).change();

Answer 1

您可以使用checked属性来确定是否选中了复选框。然后，您可以使用this获取引发事件的复选框的值。试试这个：

$("#getusb").change(function(){
  $('.active-usb').text(this.checked ? $(this).val() : '');  
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="active-usb"></span><br>   
<input type="checkbox" id="getusb" value="Halterung für USB-Stick">

Answer 2

因为您正在询问如何隐藏：

$('.active-usb').toggle(this.checked);

Answer 3

您可以查看复选框状态：

＆＃13;

$("#getusb").on("change", function() {
  //check if is checked
  if (this.checked) {
    //set the span text according to checkbox value
    $('.active-usb').text(this.value);
  } else {
    //if is not checked hide span
    $(".active-usb").hide();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="active-usb"></span>
<br>
<input type="checkbox" id="getusb" value="Halterung für USB-Stick">

＆＃13;

Answer 4

您可以尝试这样的事情： -

$("#getusb").change(function(){
   if($(this).is(':checked')){
     $('.active-usb').text($(this).val());
   }  
   else{
     $('.active-usb').text('');
   }
}).change();

OR

$("#getusb").change(function(){
   $('.active-usb').text($(this).is(':checked') ? $(this).val() : ''); 
}).change();

Answer 5

使用此Demo here

$("#getusb").on('change',function(){
    if($('#getusb').prop('checked')== true){
$('.active-usb').text($("#getusb:checkbox:checked").val());  
    }else{
        $('.active-usb').text('');  
    }
}).change();

Answer 6

使用isChecked并在文档内部。已经

$(document).ready(
    $("#getusb").on('change',function(){
       if($(this).is(':checked')){
         $('.active-usb').text($(this).val());
       }  
       else{
         $('.active-usb').text('');
       }
    });
    )

选中复选框后获取值

6 个答案: