javascript - 不打印控制台日志

Question

这里我试图在控制台中显示复选框的值，但它没有。

<input type="checkbox" id="id_price" value="1" onclick="display_img()">Under £200<br>
                        <input type="checkbox" id="id_price" value="2" > £250-£300<br>
                        <input type="checkbox" id="id_price" value="3" > £300-£450<br>

Js代码是

function display_img(){
$(document).ready(function(){
    $("#id_price").each(function(){
        if($(this).is("checked")){
            var check=document.getElementById("id_price").value;
            console.log(check);
        }
    });
});

}

Answer 1

您的代码中存在一些错误，例如:

• 您使用了多个 ID。每个元素的 id 应该是唯一的
• 您仅在其中一个元素上使用了 onclick=""
• 应该是$(this).is(":checked")

下面是编辑后的 ​​JavaScript 和 HTML。

function display_img() {
  $(".id_price").each(function() {
    if ($(this).is(":checked")) {
      var check = $(this).val();
      console.log(check);
    }
  });
};

$(".id_price").change(display_img);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="id_price" value="1">Under £200
<br>
<input type="checkbox" class="id_price" value="2"> £250-£300<br>
<input type="checkbox" class="id_price" value="3"> £300-£450<br>