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

【问题标题】：Multiple checkboxes with same id and one needs to be selected - jquery多个具有相同 id 且需要选择一个的复选框 - 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 对你有用吗？

标签： javascript jquery html asp.net checkbox

【解决方案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) 的元素执行操作，位于第一行。

【讨论】：