Question

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
  <input type="checkbox" name="check" style="display:none;" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" style="display:none;" value="check2" id="ch2">
  <label for="ch2">check2</label>
</body>
</html>
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
  function showValues() {
     alert(this.value);
  }
  $( "input[type='checkbox']" ).on( "click", showValues );
</script>

当你点击“check1”文本

时，它就像ie10中的图片一样工作

enter image description here

但它不适用于ie8

Answer 1

将<script>标记移到<body>。

中

我认为你想要在标签上注册你的点击而不是复选框（因为你实际上并没有显示复选框）。试试这个：

function showValues() {
   alert($("#"+$(this).attr("for")).val());
}
$("label").on("click", showValues);

Answer 2

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>

$(document).ready(function(){
  function showValues() {
     alert(this.value);
  }
  $( "input[type='checkbox']" ).on( "click", showValues );
});
</script>


</head>
<body>
  <input type="checkbox" name="check" style="display:none;" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" style="display:none;" value="check2" id="ch2">
  <label for="ch2">check2</label>
</body>
</html>

$（文件）.ready（）;

Answer 3

there are several items within the code 
that result in 'browser guesses' as to what you actually want.
Like having both check boxes having the same name 
they are NOT radio buttons so the names should be unique
A input attribute ID="..." is for CSS definitions, not for input identification

<input type="checkbox" name="check" style="display:none;" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" style="display:none;" value="check2" id="ch2">
<label for="ch2">check2</label>

To greatly help the browser, the code should look more like:

<label>
    check1
    <input type="checkbox" name="check1" style="display:none;" value="check1" />
</label>
<label>
    check2
    <input type="checkbox" name="check2" style="display:none;" value="check2" />
</label>

为什么＆＃39;标签＆＃39;标签不在ie8中工作

3 个答案: