复选框值显示两次

Posted 2023-03-05

【中文标题】复选框值显示两次

【英文标题】：checkbox value displaying twice

【发布时间】：2012-11-08 09:51:28

【问题描述】：

我正在使用 jquery 来获取复选框的值。但是，正在发生的事情是该值被重复，并且似乎正在获取 while 循环中所有复选框的值。如果有人能指出我的错误，我将不胜感激。谢谢。

更新：当前代码。现在只选择第一个条目。进一步单击复选框时没有输出。

php 代码

while($row = mysql_fetch_array($result)) 

    $ticket = $row['ticket_frm'];
    $rowdate = date("d/m/Y",strtotime($row['date_frm']));
    $id = $row['id_frm'];
    $from = $row['from_frm'];
    $subject = $row['subject_frm'];
    $message = $row['message_frm'];

    $myString = <<<EOF
    <span><input id="check" type="checkbox" name="delete" value="<?php echo $ticket ?>"></span>
    <div class='msgTrue buttonMailTrue' data-message='%s' data-subject='%s' data-rowdate='%s' data-from='%s'>

    <img src="images/sml_new_mail_icon.gif" class="mailIcon"  />$subject;
    <div class="rowdate">$rowdate</div><br />
    <span class="mailFrom">$from</span>
    </div>
    <p class="checked"></p>
    <!-- The following end tag need to be at the start of the line -->
    EOF;
    printf($myString, $message, $subject, $rowdate, $from);
   echo '<p class="checked">'.'</p>';

jQuery 代码

$(function() 
    $("#check").click(function() 
       var isChecked = $(this).prop("checked");  // or $(this).prop("checked")
         if (isChecked) 
           $("p.checked").html("Checkbox is checked: <b>True</b>");
        else 
           $("p.checked").html("Checkbox is checked: <b>False</b>");

); );

【参考方案1】：

您应该使用this 来使用当前的复选框：

$(".check").click(function() 
    var isChecked = this.checked;  // or $(this).prop("checked")
    if (isChecked) 
        $("p.checked").html("Checkbox is checked: <b>True</b>");
     else 
        $("p.checked").html("Checkbox is checked: <b>False</b>");
    
);

【参考方案2】：

将您的 jquery 代码更改为。由于 $('.check') 返回对象数组，因此默认情况下仅检查第一个对象的属性

$(function() 
  $('.check').click(function()
    var isChecked = $(this).is(':checked');
    alert(isChecked);
    if(isChecked)
      $('p.checked').html('Checkbox is checked: <b>True</b>');
    else
      $('p.checked').html('Checkbox is checked: <b>False</b>');
  );
);

【参考方案3】：

根据您的代码和选择器，您的页面上有许多 input class="check" 元素。 您可以通过类名找到它们，所以这就是它们重复的原因。

使用id-attribute 和$("#id") 语法获取正确的值，或在代码中使用this 关键字：

//var isChecked = $('.check').is(':checked'); - wrong
var isChecked = $(this).is(':checked'); // right

更新： 您没有为您的元素提供唯一的id。因为这行不通。您的错误与之前相同。 试试这个代码：

<input id="check$ticket" type="checkbox" name="delete" value="<?php echo $ticket ?>">

同样适用于 javascript - 您必须通过其独特的 id 来查找元素

  $("#check" + TICKET_NUMBER_HERE).click(function() 
   var isChecked = $(this).prop("checked");  // or $(this).prop("checked")
     if (isChecked) 
       $("p.checked").html("Checkbox is checked: <b>True</b>");
    else 
       $("p.checked").html("Checkbox is checked: <b>False</b>");

【讨论】：

它仍然返回重复值。如果它有所作为，我正在针对 ie6/7 进行测试。

@user1532468 将您输入的简化 Html 带给我们，以便我们对其进行测试。

@VM 我按照你原来的建议从 class 改成了 ID。

@user1532468 您仍然需要为您的元素提供唯一的id。

@VM 我试图获得价值的唯一元素是#check。我需要分配什么超过 id。谢谢

【参考方案4】：

试试

$(".check").click( function()  
    $("p.checked").html( 
        "Checkbox is checked: <b>" + $(this).is(":checked") + "</b>" );