Question

我使用的是jQuery代码（来源：http://jqueryui.com/button/#checkbox）。

我想在文本后面的按钮上添加一个图像，但是我只能在单击单词而不是图片时检查一个类别。

无论如何我可以修改代码，以便在点击按钮上的任何位置时可以检查复选框吗？

以下代码：

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Button - Checkboxes</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">   

      <style>
      #format { margin-top: 2em; }
  </style>
</head>
<body>
<div id="format">
  <input type="checkbox" id="check1"><label for="check1">Option 1<br><img src="http://www.sustainweb.org/img/alert_small_star.png"></label>
  <input type="checkbox" id="check2"><label for="check2">Option 2<br><img src="http://www.sustainweb.org/img/alert_small_star.png"></label>
  <input type="checkbox" id="check3"><label for="check3">Option 3<br><img src="http://www.sustainweb.org/img/alert_small_star.png"></label>
  <p id="text1">Hello</p>
  <p id="text2">Bye</p>
  <p id="text3">Other</p>
  <script>
  $(function() {
      $( "#check" ).button();
      $( "#format" ).buttonset();
  });
  $( "#check2" ).click(function() {
      $( "#text2" ).toggle();
  });$( "#check3" ).click(function() {
      $( "#text3" ).toggle();
  });

  </script>
</div>
</body>
</html>

任何帮助都将不胜感激。

**更新代码确实正常工作，但是当我在Sharepoint（内容编辑器webpart）中使用它时，它有一个问题，你可以点击按钮上的任何地方而不是我拥有的图像的边界。任何人都有可能知道这是为什么？

jQuery按钮图像可点击

0 个答案: