Jak wyświetlić pole potwierdzenia Javascript, gdy pole wyboru jest odznaczone, a następnie, jeśli użytkownik wybierze anuluj, pozostaw zaznaczone pole wyboru?

Question

Mam mały html form z trzema polami wyboru, po jednym w każdym row. Chcę mieć pokaz javascript confirm box, gdy użytkownik usunie zaznaczenie tego pola, a następnie, jeśli użytkownik wybierze anuluj, checkbox pozostaje zaznaczone. Przeszukałem tę stronę i kilka innych, ale prawie wszystko miało związek z testowanym checkbox, tak jakby musiały się zgodzić na pewne warunki lub coś. Jestem bardzo nowy w stosunku do Javascript, jednak próbowałem stworzyć funkcję opartą na tym, co powinienem wyglądać, ale to nie działa.

Oto moja postać:

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

I tu jest funkcja Próbowałem, ale nie działa:

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

Oto jsfiddle

wolałbym coś Javascript, ponieważ chcę być bardziej zaznajomiony z tym językiem przed wejściem do jquery, ale jeśli ma to być zrobione w jquery, to jest w porządku. Twoje zdrowie.

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> 

Przez Korzystanie id elementu

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

Za pomocą nazwy

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

Używa jQuery (bo to jest po prostu lepiej), ale mogę go bez bat razie potrzeby:

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

To dodatkowo zakłada jesteś przypisując każdy kwadracik identyfikator, który będzie trzeba. Nazwa nie obcina go w tym przypadku.

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

etc ...

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

Zauważ, że poszedłem rodzimą drogę do dialogu potwierdzić, ale przy użyciu jQuery UI można kontrolować pole wiele więcej.

EDYCJA: Dodano kontrolę, aby upewnić się, że dzieje się tak tylko po odznaczeniu. Przegapiłeś tę część.(Uwaga sprawdzić za fałszywe ponieważ gdy zdarzenie zmiany pożary zmiana już się stało)

Answer 3

chciałbym zrobić to w ten sposób:

Twoja 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)"></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; 
    } 
    } 
}