Question

如果用户检查另一个复选框，如何使用javascript自动取消选中复选框？我有这个脚本：

<input type="checkbox" name="use_ssh" value="yes">SSH
<input type="checkbox" name="use_vpn" value="yes">VPN

如果用户检查SSH，但他也会尝试检查VPN，那么javascript代码会自动取消选中SSH并选中VPN，否则就会检查Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click 'DECLARE THE STRING VARIABLE THAT YOU'RE GOING TO USE. Dim sqlQUERY As String 'FORMAT IMAGE TO BE ABLE TO SAVE TO DATABASE Dim fs As FileStream Dim br As BinaryReader Try If txtbox_image.Text.Length > 0 Then Dim FileName As String = txtbox_image.Text Dim ImageData() As Byte fs = New FileStream(FileName, FileMode.Open, FileAccess.Read) br = New BinaryReader(fs) ImageData = br.ReadBytes(CType(fs.Length, Integer)) br.Close() fs.Close() 'STORE YOUR QUERY TO A VARIABLE THAT YOU HAVE DECLARED. sqlQUERY = "INSERT INTO vids.vehicles " & _ "VALUES (" & _ " NULL, " & _ " '" & txtbox_plateno.Text.ToString() & "', " & _ " '" & txtbox_model.Text.ToString() & "', " & _ " '" & txtbox_manufacturer.Text.ToString() & "', " & _ " '" & Format(dtp_year.Value, "yyyy").ToString() & "', " & _ " '" & Format(dtp_dateacq.Value, "yyyy-MM-dd").ToString() & "', " & _ " (SELECT vehicle_type_id from vehicle_types where type_name='" & DirectCast(cb_vehicletype.SelectedItem, DataRowView).Item("type_name") & "'), " & _ " '" & Format(dtp_reg.Value, "yyyy-MM-dd").ToString() & "', " & _ " '" & Format(dtp_regexpire.Value, "yyyy-MM-dd").ToString() & "', " & _ ImageData & ", now(), now());" 'CALL THE METHOD THAT YOU HAVE CREATED AND PUT YOUR SQLQUERY IN THE PARAMETERS' LIST SAVING(sqlQUERY) RELOAD(Form1.dgv_vehicles) Me.Close() Else MsgBox("Incomplete data!", MsgBoxStyle.Critical, "") End If Catch ex As Exception MsgBox(ex.ToString()) End Try End Sub。我怎么能用javascript做到这一点？基本上我只想检查一个复选框而不是两个。请不要问我为什么使用复选框而不是其他方法，如果我使用其他方法并且没有足够的时间来完成，我将不得不重写整个脚本。

Answer 1

如果您需要可切换的功能，最好使用单选按钮而不是复选框。

它仍然要使用复选框，然后这里是根据您的需要使用JQuery的代码。

只需在每个复选框上添加change侦听器，然后更改其他人的'checked'属性。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="use_ssh" value="yes">SSH
<input type="checkbox" name="use_vpn" value="yes">VPN

<script>
  
  var ssh = $('input[name="use_ssh"]');
  var vpn = $('input[name="use_vpn"]');
  
  ssh.change(function(){vpn.prop('checked',false);});
  vpn.change(function(){ssh.prop('checked',false);});
  
</script>

＆＃13;

Answer 2

这是您应该如何操作的，如果已经选中了每个复选框更改测试，则取消选中所有其他复选框。

在以下代码段我也在测试您有两个以上复选框的情况：

＆＃13;

var checkboxes = $('input[type="checkbox"]');
console.log(checkboxes);
checkboxes.each(function() {
  $(this).change(function() {
    console.dir($(this)[0].checked);
    if ($(this)[0].checked) {
      var current = $(this)[0];
      checkboxes.each(function(elem) {
        if ($(this)[0] !== current) {
          $(this)[0].checked = false;
        }

      });
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="use_ssh" value="yes" checked>SSH
<input type="checkbox" name="use_vpn" value="yes">VPN
<input type="checkbox" name="cc" value="yes">Test1
<input type="checkbox" name="vv" value="yes">Test2

＆＃13;

它的行为与单选按钮完全相同，但当然使用单选按钮会更容易和简单。

Answer 3

我已经基于Javascript（没有jQuery）创建了一个解决方案。

这是javascript代码：

window.onload =  function(){ 

    var checkBoxes = document.querySelectorAll("input[type=checkbox]");

    for(var i = 0 ; i < checkBoxes.length ; i++){
        checkBoxes[i].addEventListener("change", checkUncheck, false);
    }

    function checkUncheck(){        
        for(var i = 0 ; i < checkBoxes.length ; i++){
            if(this.name !== checkBoxes[i].name && checkBoxes[i].checked){
                checkBoxes[i].checked = false;
            }
        }
    }

}

使用此方法，您可以添加其他复选框，并在这些复选框具有不同名称时获得相同的结果。

这是我的HTML：

<input type="checkbox" name="use_ssh" value="yes">SSH
<input type="checkbox" name="use_vpn" value="yes">VPN
<input type="checkbox" name="use_abb" value="yes">ABB
<input type="checkbox" name="use_bcc" value="yes">BCC
               ...

注意：我已经在

上测试了这段代码

Chrome版本：44.0.2403.107

Firefox版本：39.0

如果已经选中了其他复选框，如何使用javascript自动取消选中复选框？

3 个答案: