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

时间：2015-04-20 21:10:55

标签： javascript jquery html asp.net checkbox

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

以下示例;有两行，如果你选择第一行中的电子邮件图标然后它会勾选相关复选框，这很好但是如果你勾选下一行的电子邮件图标，那么它将取消勾选第一行复选框而不是勾选它旁边的那个。

＆＃13;
＆＃13; 
$(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);
    }
  });
});
＆＃13; 
    .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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

的jsfiddle

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

4 个答案:

答案 0 :(得分：1)

这很有效。

我给了行一类联系。通过使用$("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);  
        }    

    });
});

答案 1 :(得分：1)

尽管你必须使用唯一的ID来表示元素，但考虑到你的情景，我已经写下了这个小提琴。

我已使用此$(this).parent().next('td').find('input:checkbox');查找复选框

请尝试此http://jsfiddle.net/g8Xuz/50/

答案 2 :(得分：0)

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

答案 3 :(得分：0)

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

＆＃13;
＆＃13; 
$(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);
        }   
    });
});
＆＃13; 
    .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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

相关问题
最新问题