Come mostrare la casella di conferma di Javascript quando la casella di controllo è deselezionata e quindi se l'utente seleziona annulla, lasciare selezionata la casella?

Question

Ho un piccolo html form con tre caselle di controllo, una su ogni row. Voglio mostrare uno javascript confirm box quando l'utente deseleziona la casella, e quindi se l'utente seleziona annulla, lo checkbox rimane selezionato. Ho cercato questo sito e alcuni altri, ma quasi tutto era a che fare con il checkbox controllato, come se dovessero accettare alcuni termini o qualcosa del genere. Sono molto nuovo a Javascript tuttavia ho provato a fare una funzione basata su come avrei dovuto sembrare, ma non funziona.

Qui è la mia forma:

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

E qui è la funzione che ho provato, ma non funziona:

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

Ecco un jsfiddle

Io preferirei qualcosa in Javascript come voglio familiarizzare con quella lingua prima di entrare in jquery, ma se deve essere fatto in jquery, quindi va bene. Saluti.

Answer 1

Try This Way

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

utilizzando l'elemento Id

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

utilizzando Nome

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

Usa jQuery (perché è solo meglio) ma ho potuto frusta senza se necessario:

$('#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); 
     } 
    } 
}); 

Questo presuppone inoltre si sta assegnando ad ogni casella un id, che è necessario. Il nome non lo taglia in questo caso.

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

ecc ...

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

Nota che sono andato il modo nativo per il dialogo di conferma, ma utilizzando jQuery UI è possibile controllare la casella molto di più.

MODIFICA: è stato aggiunto un segno di spunta per assicurarsi che accada solo quando lo si deseleziona. Mancava quella parte.(Nota di controllare per falso perché quando l'evento di modifica spara il cambiamento è già avvenuto)

Answer 3

vorrei fare in questo modo:

Il modulo:

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

Il javascript:

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