5

html formそれぞれに1つずつ、3つのチェックボックスがある小さなものがあります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それで問題ありません。乾杯。

4

3 に答える 3

6

この方法を試す 

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

要素 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;

      }
    }

ワーキングデモ

名前を使用して

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;

      }
    }

要素名を使用したデモ

于 2013-01-08T04:20:27.750 に答える
5

私はこのようにします：

あなたのフォーム:

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

ジャバスクリプト：

function cTrig(box) {
  if (!box.checked) {
    if (!confirm("Are you sure you want to do this?")) {
        box.checked = true;
    }
  }
}
于 2013-01-08T05:18:43.063 に答える
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 をチェックすることに注意してください）

于 2013-01-08T04:18:00.230 に答える