多个具有相同 id 且需要选择一个的复选框 - jquery

Posted 2023-05-08

【中文标题】多个具有相同 id 且需要选择一个的复选框 - jquery

【英文标题】：Multiple checkboxes with same id and one needs to be selected - jquery

【发布时间】：2015-06-27 19:17:05

【问题描述】：

在 asp.net 转发器控件中有多个具有相同 id 的复选框。用户可以针对转发器行中的每条记录选择电子邮件或电话。

在下面的例子中；有两行，如果您选择第一行中的电子邮件图标，那么它会勾选相关复选框，这很好，但如果您勾选下一行的电子邮件图标，那么它将取消勾选第一行复选框，而不是勾选它旁边的复选框。

$(function() 
  $("[id*=divchkemail]").click(function() 

    $(this).toggleClass("image-email");

    if ($('#chkemail').prop('checked')) 
      $("#chkemail").prop('checked', false);
     else 

      if ($('#chkphone').prop('checked')) 
        $("#chkphone").prop('checked', false);
        $("#divchkphone").toggleClass("image-phone");
      
      $("#chkemail").prop('checked', true);
    

  );

  $("[id*=divchkphone]").click(function() 


    $(this).toggleClass("image-phone");

    if ($('#chkphone').prop('checked')) 
      $("#chkphone").prop('checked', false);
     else 
      if ($('#chkemail').prop('checked')) 
        $("#chkemail").prop('checked', false);
        $("#divchkemail").toggleClass("image-email");
      

      $("#chkphone").prop('checked', true);
    
  );
);

    .image-phone-disabled 
      background-image: url('http://i.imgur.com/74FcgdS.png');
      background-repeat: no-repeat;
      width: 34px;
      height: 34px;
    
    .image-phone 
      background-image: url(http://i.imgur.com/LwsHkOt.png);
      background-repeat: no-repeat;
      width: 34px;
      height: 34px;
    
    .image-email-disabled 
      background-image: url('http://i.imgur.com/khd2NG8.png');
      background-repeat: no-repeat;
      width: 34px;
      height: 34px;
    
    .image-email 
      background-image: url(http://i.imgur.com/y5KE9jx.png);
      background-repeat: no-repeat;
      width: 34px;
      height: 34px;
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border=0>
  <tr>
    <td>
      <div id="divchkemail" class="image-email-disabled" />
    </td>
    <td>
      <input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkemail"></input>
    </td>
  </tr>
  <tr>
    <td>
      <div id="divchkphone" class="image-phone-disabled" />
    </td>
    <td>
      <input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkphone"></input>

    </td>

  </tr>
</table>

<br/>
<br/>
<br/>


<span>

  
    

</span>

<table border=0>
  <tr>
    <td>
      <div id="divchkemail" class="image-email-disabled" />
    </td>
    <td>
      <input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkemail"></input>
    </td>
  </tr>
  <tr>
    <td>
      <div id="divchkphone" class="image-phone-disabled" />
    </td>
    <td>
      <input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkphone"></input>
    </td>
  </tr>
</table>
<span>
    
 

</span>

JSFiddle

http://jsfiddle.net/g8Xuz/48/

【问题讨论】：

期望的行为是什么？只允许检查一个或另一个？或者只是将每个图标与旁边的检查相关联？

每行只能选择一个。因此，在第一行中，您可以选择电子邮件或电话，但不能同时选择两者，下一行也是如此。

是否允许多个元素具有相同的 id？复选框应该有名字，不是吗？

这就是为什么您需要具有相同名称而不是复选框的 RADIO 框

@user1263981 对你有用吗？

【参考方案1】：

尽管您必须对元素使用唯一的 id，但鉴于您的情况，我已经写下了这个小提琴。

我用这个$(this).parent().next('td').find('input:checkbox'); 来查找复选框

请试试这个http://jsfiddle.net/g8Xuz/50/

【参考方案2】：

这行得通。

我给这些行指定了一个联系人类别。它也可以通过使用$("table > tr") 来代替行上的类而不工作。无需知道确切的类名，并且可以处理任意数量的集合，从而为字段提供正确的唯一 ID。

FIDDLE

$(function () 
    $(".contact").on("click", function (e) 
        var $div = $(this).find("div"); // the div on the clicked row
        var divClass = $div.prop("class"); // its class
        var $checkbox = $(this).find("input"); // the checkbox
        var check = $checkbox.is(":checked"); // whether or not it is checked
        if (e.target.type != "checkbox")  // we clicked somewhere else
            check = !check; // toggle
            $checkbox.prop("checked", check); // set the check
        
        if (check)  // are we enabling?
          if (divClass.indexOf("disabled") != -1)  // disabled?
              $div.removeClass(divClass).addClass(divClass.replace("-disabled", ""));
           
        
        else  // disable it
          $div.removeClass(divClass).addClass(divClass + "-disabled");
        


        var $otherContact=$(this).siblings("tr"); // the sibling row
        if (check) 
            $div = $otherContact.find("div");
            divClass=$div.prop("class");
            if (divClass.indexOf("disabled") == -1) 
              $div.removeClass(divClass).addClass(divClass+"-disabled");
                
            $checkbox=$otherContact.find("input"); // the checkbox
            if ($checkbox.is(":checked")) $checkbox.prop("checked",false);  
            

    );
);

【参考方案3】：

发生这种情况是因为您按 id 选择元素并且它是重复的。您必须在 DOM 树中找到遍历其祖先的所需元素，以便选择器仅通过设置元素区域来选择当前行内的元素。这是工作代码。

$(function () 
    $("[id*=divchkemail]").click(function (e) 
        var currentRow = $(e.target).parents().closest('table');
        $(this).toggleClass("image-email");

        if ($(currentRow).find('#chkemail').prop('checked')) 
            $(currentRow).find('#chkemail').prop('checked', false);
        
        else 
            var chkPhoneInCurrentRow = $(currentRow).find('#chkphone')
            var divchkInCurrentRow = $(currentRow).find('#divchkphone')
            if ($(chkPhoneInCurrentRow).prop('checked')) 
                $(chkPhoneInCurrentRow).prop('checked', false);
                $(divchkInCurrentRow).toggleClass("image-phone");
            
            $(currentRow).find('#chkemail').prop('checked', true);
           
    );

    $("[id*=divchkphone]").click(function (e) 
        var currentRow = $(e.target).parents().closest('table');
        $(this).toggleClass("image-phone");

        if ($(currentRow).find('#chkphone').prop('checked')) 
            $(currentRow).find('#chkphone').prop('checked', false);
        
        else 
            var chkEmailInCurrentRow = $(currentRow).find('#chkemail')
            var divchkInCurrentRow = $(currentRow).find('#divchkemail')
            if ($(chkEmailInCurrentRow).prop('checked')) 
                $(chkEmailInCurrentRow).prop('checked', false);
                $(divchkInCurrentRow).toggleClass("image-email");
            
            $(currentRow).find('#chkphone').prop('checked', true);
           
    );
);

    .image-phone-disabled 
	background-image:url('http://i.imgur.com/74FcgdS.png');
    background-repeat:no-repeat ;
	width:34px;
	height:34px;  
    
   .image-phone 
	    background-image:url(http://i.imgur.com/LwsHkOt.png);  
        background-repeat:no-repeat ; 
	    width:34px;
	    height:34px;
    

   .image-email-disabled 
	background-image:url('http://i.imgur.com/khd2NG8.png');
    background-repeat:no-repeat ;
	width:34px;
	height:34px;  
    
   .image-email 
	    background-image:url(http://i.imgur.com/y5KE9jx.png);  
        background-repeat:no-repeat ; 
	    width:34px;
	    height:34px;
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border=0>
    <tr>
        <td>
            <div id="divchkemail" class="image-email-disabled" /> </td>
         <td>     <input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkemail"></input>
        </td>
    </tr>
    <tr>
        <td>
            <div id="divchkphone" class="image-phone-disabled" />
        </td>
        <td>
            <input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkphone"></input>
            
        </td>
        
    </tr>
</table>

<br/>
<br/>
<br/>


    <span>

  
    

</span>

<table border=0>
    <tr>
        <td><div id="divchkemail" class="image-email-disabled" /></td>
        <td>
            <input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkemail"></input>
        </td>
    </tr>
    <tr>
        <td><div id="divchkphone" class="image-phone-disabled" /></td>
         <td>
               <input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkphone"></input>
        </td>
    </tr>
</table>
<span>
    
 

</span>

这是工作小提琴。 http://jsfiddle.net/hannnan/noukkjsq/

【讨论】：

很好的解决方案，因为无论复选框在表格中的哪个位置，它都可以工作。像这样jsfiddle.net/noukkjsq/1

嗯，很失望。我发现我的版本更优雅，更不用说更通用，不需要知道类名，任何一组联系人都只有一个函数。我的函数不需要知道在任何情况下都应该是唯一的 ID。

【参考方案4】：

发生这种情况是因为您对所有内容都使用相同的 ID - JS 无法区分这两行。因此，您单击第二行的图标，它找到的第一个具有您的 ID (#divchkemail) 的元素执行操作，位于第一行。