如果未勾選複選框，如何顯示Javascript確認框，然後如果用戶選擇取消，請勾選複選框？

Question

我有一個小html form與三個複選框，每個row。當用戶取消選中該框時，我想要顯示一個javascript confirm box，然後如果用戶選擇取消，則checkbox保持選中狀態。我搜索了這個網站和其他一些網站，但幾乎所有的事情都與checkbox被檢查有關，就像他們必須同意某些術語或其他內容一樣。我對Javascript很新，但是我試圖根據我應該看起來的樣子製作一個功能，但它不起作用。

這裏是我的形式：

<form action="" method="post"> 
    <table id="table"> 
    <tr> 
     <td>Checkbox One</td> 
     <td align="center"> 
     <input type="checkbox" name="check1" checked="checked" onchange="cTrig(this.name)"></input> 
     </td> 
    </tr> 
    <tr> 
     <td>Checkbox Two</td> 
     <td align="center"> 
     <input type="checkbox" name="check2" checked="checked" onchange="cTrig(this.name)"></input> 
     </td> 
    </tr> 
    <tr> 
     <td>Checkbox Three</td> 
     <td align="center"> 
     <input type="checkbox" name="check3" checked="checked" onchange="cTrig(this.name)"></input> 
     </td> 
    </tr> 
    <tr align="center"> 
     <td colspan="2"> 
     <input type="submit" name="submit" value="submit"></input> 
     </td> 
    </tr> 
    </table> 
</form> 

這裏是我試過的功能，但不工作：

function cTrig(name) { 
    if (name.checked == true) { 
    confirm("Are you sure you want to do this?"); 
    return true; 
    } else { 
    return false; 
    } 
} 

這裏是一個jsfiddle

我寧願什麼Javascript，因爲我想在進入jquery之前更熟悉該語言，但是如果必須在jquery，那很好。乾杯。

Answer 1

試試這個方法

<form action="" method="post"> 
    <table id="table"> 
    <tr> 
     <td>Checkbox One</td> 
     <td align="center"> 
     <input type="checkbox" name ="check1" id="check1" checked='checked' onchange="cTrig('check1')"></input> 
     </td> 
    </tr> 
    <tr> 
     <td>Checkbox Two</td> 
     <td align="center"> 
     <input type="checkbox" name="check2" id="check2" checked='checked' onchange="cTrig('check2')"></input> 
     </td> 
    </tr> 
    <tr> 
     <td>Checkbox Three</td> 
     <td align="center"> 
     <input type="checkbox" id="check3" name="check3" checked='checked' onchange="cTrig('check3')"></input> 
     </td> 
    </tr> 
    <tr align="center"> 
     <td colspan="2"> 
     <input type="submit" name="submit" value="submit"></input> 
     </td> 
    </tr> 
    </table> 
</form> 

通過要素標識

function cTrig(clickedid) { 
     if (document.getElementById(clickedid).checked == true) { 
     return false; 
     } else { 
     var box= confirm("Are you sure you want to do this?"); 
     if (box==true) 
      return true; 
     else 
      document.getElementById(clickedid).checked = true; 

     } 
    } 

Working Demo

通過使用名稱

function cTrig(clickedid) { 
     if (document.getElementsByName(clickedid)[0].checked == true) { 
     return false; 
     } else { 
     var box= confirm("Are you sure you want to do this?"); 
     if (box==true) 
      return true; 
     else 
      document.getElementsByName(clickedid)[0].checked = true; 

     } 
    } 

Demo Using element name

Answer 2

用了jQuery（因爲它只是更好），但我能掀起它無需如果需要的話：

$('#check1').change(function(){ 
    if($("#check1").prop('checked') == false) 
    { 
     var i = window.confirm("Sure?"); 
     if(i == true) 
     { 
      $("#check1").prop('checked', false); 
     } 
     else 
     { 
      $("#check1").prop('checked', true); 
     } 
    } 
}); 

另外，這假設你分配每個複選框的ID，您將需要。在這種情況下名稱不會削減它。

<input type="checkbox" id="check1" name="check1" checked="checked"></input> 

等等

http://jsfiddle.net/RbENV/10/

請注意，我去確認對話土辦法，但使用jQuery UI你可以很多更控制箱。

編輯：添加一個檢查，以確保它只發生在你沒有選中它時。錯過了那部分。（注意：您檢查false，因爲當更改事件觸發的變化已經發生）

Answer 3

我會做這種方式：

您的形式：

<form action="" method="post"> 
    <table id="table"> 
    <tr> 
     <td>Checkbox One</td> 
     <td align="center"> 
     <input type="checkbox" name="check1" checked="checked" onchange="cTrig(this)"></input> 
     </td> 
    </tr> 
    <tr> 
     <td>Checkbox Two</td> 
     <td align="center"> 
     <input type="checkbox" name="check2" checked="checked" onchange="cTrig(this)"></input> 
     </td> 
    </tr> 
    <tr> 
     <td>Checkbox Three</td> 
     <td align="center"> 
     <input type="checkbox" name="check3" checked="checked" onchange="cTrig(this)"></input> 
     </td> 
    </tr> 
    <tr align="center"> 
     <td colspan="2"> 
     <input type="submit" name="submit" value="submit"></input> 
     </td> 
    </tr> 
    </table> 
</form> 

的JavaScript：

function cTrig(box) { 
    if (!box.checked) { 
    if (!confirm("Are you sure you want to do this?")) { 
     box.checked = true; 
    } 
    } 
}