具有相同 ID 的多个复选框，需要选中一个 - jquery

Question

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

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

$(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/

Answer 1

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

Answer 2

这行得通。

我给了行一个 class 联系。它也可以在行上没有 class 的情况下使用 $("table > tr") 来工作。无需知道确切的 class 名称，并且可以处理任意数量的集合，允许字段的正确唯一 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);  
        }    

    });
});

Answer 3

虽然您必须为元素使用唯一 ID，但考虑到您的场景，我已经记下了这个 fiddle。

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

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

Answer 4

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

$(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>

这里正在工作fiddle。 http://jsfiddle.net/hannnan/noukkjsq/

具有相同 ID 的多个复选框，需要选中一个 - jquery

Multiple checkboxes with same id and one needs to be selected - jquery

html

javascript

asp.net

checkbox

jquery