5

我有一个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

我更喜欢 in 的东西，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>

的JavaScript：

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>

ETC...

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

请注意，我使用本机方式进行确认对话，但使用jQuery UI您可以更多地控制该框。

编辑：添加了一个检查以确保它仅在您取消选中它时发生。错过了那部分。（请注意，您检查是否为 false，因为当更改事件触发时，更改已经发生）

于 2013-01-08T04:18:00.230 回答