带单选按钮功能的复选框

<style> 
    .chb 
    { 
     width: 30px; 
    } 
</style> 

<script type="text/javascript" src="jquery-1.5.2.js"></script> 
<script> 
    $(".chb").each(function() { 
     $(this).change(function() { 
      $(".chb").attr('checked',false); 
      $(this).attr('checked',true); 
     }); 
    }); 
</script> 

<form action="demo_form.asp"> 
    <input type="checkbox" name="vehicle" value="Bike" class ="chb"> I have a bike<br> 
    <input type="checkbox" name="vehicle" value="Car" checked="checked" class="chb"> I have a car <br> 
</form>

上述编码包含两个带单选按钮功能的复选框。这工作正常。但如何使用JavaScript而不使用jQuery。如何实现这一点。带单选按钮功能的复选框

来源

2012-11-24 Rithu

为什么不使用单选按钮？ –

语义上你应该使用单选按钮。 –

客户希望使用带有单选按钮功能的复选框，而不包括jquery – Rithu

的想法，如果你只关注有关的功能，你必须很多复选框这是一个简单的解决方案。

<script> 
    function func(checkBox) { 
     var inputs = document.getElementsByTagName("input"); 
     for(var j = 0; j < inputs.length; j++) { 
      if(inputs[j].type == "checkbox" && (inputs[j].className == "chb")){ 
      inputs[j].checked = false; 
      }  
     } 
     checkBox.checked = true; 
    } 
</script>

现在将onclick事件添加到您的所有复选框如下。

<input type="checkbox" name="vehicle" value="Bike" class ="chb" onclick="func(this);"> I have a bike<br> 
<input type="checkbox" name="vehicle" value="Car" checked="checked" class="chb" onclick="func(this);"> I have a car <br>

来源

2012-11-24 05:34:50 prageeth

是的。这工作正常。很多感谢 – Rithu

我喜欢非jQuery的方法（没有双关意图） –

这是一些很棒的代码！ – MVCKarl

详情：也许不是最优雅的代码，但它会做的伎俩，并给你如何定制你的目的

<input type="checkbox" name="chkFirst" onclick="CheckboxCheck('first')" /> 
<input type="checkbox" name="chkSecond" onclick="CheckboxCheck('second')" /> 

<script> 
    function CheckboxCheck(checkbox) 
    { 
     var firstCheckbox = document.getElementById('chkFirst'); 
     var secondCheckbox = document.getElementById('chkSecond'); 

     if (checkbox == "first") 
     { 
      if (secondCheckbox.checked && firstCheckbox.checked == true) 
      { 
       secondCheckbox.checked = false; 
      } 
     } 
     else 
     { 
      if (firstCheckbox.checked && secondCheckbox.checked == true) 
      { 
       firstCheckbox.checked = false; 
      } 
     } 
    } 
</script>

来源

2012-11-24 05:29:35 MVCKarl

它正在与复选框功能。 – Rithu

我假设你只需要这个功能用于类名为chb的输入。否则将需要更多的循环。

与这里提到的其他解决方案，我的代码不需要添加onclick每一个复选框：

<!DOCTYPE html> 
<html lang="en-CA"> 
<head> 
    <meta charset="utf-8"> 
    <title> My page </title> 
    <script> 
    function doCrazyCheckRadioThing(v) { 
     var checkboxes, i; 

     for(i=0, checkboxes = document.getElementsByClassName('chb'); i<checkboxes.length; i+=1) { 
      checkboxes[i].checked = (checkboxes[i].value === v); 
     } 
    } 

    function init() { 
     var checkboxes, i; 

     for(i=0, checkboxes = document.getElementsByClassName('chb'); i<checkboxes.length; i+=1) { 
      checkboxes[i].addEventListener('change', function() { 
       doCrazyCheckRadioThing(this.value); 
      }, false); 
     } 
    } 

    document.addEventListener('DOMContentLoaded', init, false); 
    </script> 
<body> 
    <form action="demo_form.asp"> 
     <input type="checkbox" name="vehicle" id='bike' value="Bike" class="chb"> I have a bike<br> 
     <input type="checkbox" name="vehicle" id='car' value="Car" checked="checked" class="chb"> I have a car <br> 
    </form>

再次，我必须强调这是一个非常非语义编码的HTML做到这一点的方式 。

来源

2012-11-24 05:38:36

非常感谢，这对我来说工作得很好 – Rithu

但是你非常正确。这是一种非语义的方式。我接受这一点 – Rithu

也许，你可以吃你的蛋糕，也吃它。如果这只是外观，而且您可以考虑使用CSS解决方案，则可以在代码中使用单选按钮，并使其看起来像是复选框。

input[type="radio"] { 
    -webkit-appearance: checkbox; 
    -moz-appearance: checkbox; 
}

不需要JavaScript或jQuery。不过，我还没有测试过如何跨浏览器友好。绝对适用于Chrome和Firefox。肯定不适用于IE

来源

2012-11-24 05:43:37 Abhilash

这是一个好主意。那么非常感谢你。大 – Rithu

带单选按钮功能的复选框

回答

相关问题