jQuery的複選框事件累計

爲了得到一個引導模式對複選框打開單擊
爲了有一個確認或取消該選項的模式中的兩個按鈕。
僅具有被點擊的影響

的問題是複選框，當多個複選框已被點擊，他們都有着相同的事件，更單擊所實現的多。我嘗試過各種解決方案，嘗試點擊事件只會影響特定的複選框，儘管我沒有得到最終結果。

我會很感激任何幫助！

//listen for a click on the checkbox 
 
var confirm = $('#validationConfirm'); 
 
var cancel = $('#validationCancel'); 
 

 
function modalCheck(e, element) { 
 
    console.log(e.srcElement.checked) 
 
    if (amIclicked(e, element)) { 
 
    confirm.click(function() { 
 

 
     console.log(e.srcElement) 
 
     element.checked = true 
 
    }); 
 
    } 
 
    if (amIclicked(e, element)) { 
 
    cancel.click(function() { 
 

 
     console.log(e.srcElement) 
 
     element.checked = false 
 
    }); 
 
    } 
 
} 
 

 
function amIclicked(e, element) { 
 
    e = e || event; 
 
    var target = e.target || e.srcElement; 
 
    if (target.id == element.id) 
 
    return true; 
 
    else 
 
    return false; 
 
}

#validationModal { 
 
    top: 20%; 
 
} 
 

 
.validationModal-body { 
 
    text-align: center; 
 
    padding: 5%; 
 
} 
 

 
.validationModal-body h2 { 
 
    font-weight: 600; 
 
} 
 

 
.validationModal-body .row { 
 
    padding: 2%; 
 
} 
 

 
.Staf-login__table .row :nth-child(4) { 
 
    text-align: initial; 
 
} 
 

 
.Staf-login__table .row { 
 
    padding: 1% 0; 
 
} 
 

 
@media (max-width: 770px) { 
 
    .voucher-code-checker--go { 
 
    width: 100%; 
 
    padding: 1em; 
 
    text-align: center; 
 
    } 
 
    .btn-purple.go { 
 
    width: 100%; 
 
    } 
 
} 
 

 
.Staff-login__view-more ul { 
 
    list-style-type: none; 
 
    display: flex; 
 
    flex-flow: row; 
 
} 
 

 
.Staff-login__view-more li { 
 
    border: 1px solid #D4D4D4; 
 
    border-radius: 50px; 
 
    padding: 0px 10px; 
 
    font-size: 0.8em; 
 
    margin: 0 2.5px; 
 
} 
 

 
.Staff-login__view-more a { 
 
    color: #4A4A4A; 
 
} 
 

 
.Staff-login__view-more li:hover { 
 
    background: #2D988D; 
 
    color: #fff; 
 
    opacity: 0.5; 
 
} 
 

 
.Staff-login__view-more li.active { 
 
    background: #2D988D; 
 
    color: #fff; 
 
}

<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <script src="../Sass/scripts/jquery-3.2.1.min.js"></script> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <title>Voucher Code Checker</title> 
 
</head> 
 

 
<div class="Staff-login__wrapper"> 
 
    <div class="Staff-login__header"> 
 
    <div class="row flex"> 
 
     <div class="col-xs-10 col-sm-4 col-md-4 Spaced_x-small" id="StaffLogin"> 
 
     <h3>Voucher Code Checker</h3> 
 
     </div> 
 
     <div class="col-sm-0 Spaced_x-small"><a href="#">LOGOUT</a></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-8 no-padding"> 
 
     <div id="staffLoginIndexSearch" class="col-sm-7"> 
 
      <div class="input-group stylish-input-group"> 
 
      <input type="text" class="form-control" placeholder="Search..."> 
 
      <span class="input-group-addon"> 
 
          <button type="submit"> 
 
           <span class="glyphicon glyphicon-search"></span> 
 
      </button> 
 
      </span> 
 
      </div> 
 
     </div> 
 
     <div class="voucher-code-checker--go col-sm-2"><button class="btn-purple go">Go</button></div> 
 
     </div> 
 

 
     <div class="col-sm-4 Staff-login__create_back--btn"> 
 
     <button class="btn-purple">BACK</button> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
    <!--Staff Login Table--> 
 
    <div class="Staf-login__table Spaced_x-small"> 
 
    <div class="row primary-bg"> 
 
     <div class="col-xs-2 col-sm-2">Name</div> 
 
     <div class="col-xs-2 col-sm-2">Email</div> 
 
     <div class="col-xs-2 col-sm-2">Code</div> 
 
     <div class="col-xs-2 col-sm-4">Validate</div> 
 
     <div class="col-xs-2 col-sm-2">More Details</div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row primary-light-bg"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row primary-light-bg"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row primary-light-bg"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" id="test" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <div class="row primary-light-bg"> 
 
     <div class="col-xs-3 col-sm-2">John</div> 
 
     <div class="col-xs-3 col-sm-2">Smith</div> 
 
     <div class="col-xs-3 col-sm-2">eGUWKfed</div> 
 
     <div class="col-xs-3 col-sm-4"><input type="checkbox" name="validated" value="" id="test2" onClick="modalCheck(event, this);" data-toggle="modal" data-target="#validationModal" /></div> 
 
     <div class="col-xs-3 col-sm-2"> 
 
     <a href="#"><img src="../Images/green_info_icon.png" /></a> 
 
     </div> 
 
    </div> 
 

 
    <!--View More--> 
 
    <div class="Staff-login__view-more"> 
 
     <ul> 
 
     <a href="#"> 
 
      <li> 
 
      <p> 
 
       <</p> 
 
      </li> 
 
     </a> 
 
     <a href="#"> 
 
      <li class="active"> 
 
      <p>1</p> 
 
      </li> 
 
     </a> 
 
     <a href="#"> 
 
      <li> 
 
      <p>2</p> 
 
      </li> 
 
     </a> 
 
     <a href="#"> 
 
      <li> 
 
      <p>3</p> 
 
      </li> 
 
     </a> 
 
     <a href="#"> 
 
      <li> 
 
      <p>></p> 
 
      </li> 
 
     </a> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <!-- Validation Modal --> 
 
    <div id="validationModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="validationModal-body"> 
 
      <h2>Are you sure you want to validate this code?</h2> 
 
      <div class="row"> 
 
      <div class="col-sm-6" style="text-align: right;"><button class="btn-purple" id="validationConfirm">confirm</button></div> 
 
      <div class="col-sm-6" style="text-align: left;"><button class="btn-purple" id="validationCancel">cancel</button></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

來源

2017-10-09 Harry

所以我與.unbind '事件處理程序類型' 解決了這個問題。

confirm.unbind("click"); 
    cancel.unbind("click");

http://api.jquery.com/unbind/

其中刪除了被堆放在以前的事件。但是，如果沒有強制模式關閉並重置事件以重新開始，則這不起作用。

所以，總體來說它結束了看起來像這樣：

//listen for a click on the checkbox 
    var confirm = $('#validationConfirm'); 
    var cancel = $('#validationCancel'); 

    function modalCheck(e, element) { 
     console.log(e.srcElement.checked) 
     //confirm button 
     if (amIclicked(e, element)) { 
      var confirmClick = confirm.click(function() { 

       element.checked = true 
        confirm.unbind("click"); 
        cancel.unbind("click"); 

       //closes modal 
        $(function() { 
         $('#validationModal').modal('toggle'); 
        }); 
      }); 
     } 
     //cancel button 
     if (amIclicked(e, element)) { 
      var cancelClick = cancel.click(function() { 
       element.checked = false 

       confirm.unbind("click"); 
       cancel.unbind("click"); 

       //closes modal 
       $(function() { 
        $('#validationModal').modal('toggle'); 
       }); 
      }); 
     } 
    } 

    function amIclicked(e, element) { 
     e = e || event; 
     var target = e.target || e.srcElement; 
     if (target.id == element.id) 
      return true; 
     else 
      return false; 
    }

來源

2017-10-09 14:42:55 Harry

jQuery的複選框事件累計

回答

相關問題