【问题标题】:How to uncheck checkbox when radio button is checked and uncheck radio button when checkboxes are checked using Javascript如何在选中单选按钮时取消选中复选框并在使用Javascript选中复选框时取消选中单选按钮
【发布时间】:2014-08-07 17:35:42
【问题描述】:
<div id="a">
  <input type="radio" name="sex" value="male">Male<br>
  <input type="radio" name="sex" value="female">Female
</div>

<div id="b">
  <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car">I have a car 
</div>

如果检查复选框,则应取消选中单选按钮,并在选中单选按钮时,应未选中复选框。

             function uncheckDisabiltiesCheckbox(){
     var isChecked1 = document.getElementById('disabilitiesCheckbox1').checked;
     var isChecked2 = document.getElementById('disabilitiesCheckbox2').checked;
     var isChecked3 = document.getElementById('disabilitiesCheckbox3').checked;
     var isChecked4 = document.getElementById('disabilitiesCheckbox4').checked;
     var isChecked5 = document.getElementById('disabilitiesCheckbox5').checked;
     var isChecked6 = document.getElementById('disabilitiesCheckbox6').checked;
     var isChecked7 = document.getElementById('disabilitiesCheckbox7').checked;
     var isChecked8 = document.getElementById('disabilitiesCheckbox8').checked;
     var isChecked9 = document.getElementById('disabilitiesCheckbox9').checked;
     var isChecked10=document.getElementById('disabilitiesCheckbox10').checked;
             var isChecked11=document.getElementById('disabilitiesCheckbox11').checked;
             var isChecked12=document.getElementById('disabilitiesCheckbox12').checked;
             var isChecked13=document.getElementById('disabilitiesCheckbox13').checked;               


     if(isChecked1){
         document.getElementById('disabilitiesCheckbox1').checked = false;
     }
     if(isChecked2){
         document.getElementById('disabilitiesCheckbox2').checked = false;
     }
     if(isChecked3){
         document.getElementById('disabilitiesCheckbox3').checked = false;
     }
     if(isChecked4){
         document.getElementById('disabilitiesCheckbox4').checked = false;
     }
     if(isChecked5){
         document.getElementById('disabilitiesCheckbox5').checked = false;
     }
     if(isChecked6){
         document.getElementById('disabilitiesCheckbox6').checked = false;
     }
     if(isChecked7){
         document.getElementById('disabilitiesCheckbox7').checked = false;
     }
     if(isChecked8){
         document.getElementById('disabilitiesCheckbox8').checked = false;
     }
     if(isChecked9){
         document.getElementById('disabilitiesCheckbox9').checked = false;
     }
     if(isChecked10){
         document.getElementById('disabilitiesCheckbox10').checked = false;
     }
     if(isChecked11){
         document.getElementById('disabilitiesCheckbox11').checked = false;
     }
     if(isChecked12){
         document.getElementById('disabilitiesCheckbox12').checked = false;
     }
     if(isChecked13){
         document.getElementById('disabilitiesCheckbox13').checked = false;
     }
   }

上面是选择单选按钮时取消选中所有复选框的代码。选中复选框时如何开始取消选中单选按钮。

disabilities.js

             $(document).ready(function(){

     $('#disabilitiesRadio :radio').click(function(){
           $('#disabilitiesCheckbox :checkbox').prop('checked', false);
     });

     $('#disabilitiesCheckbox :checkbox').click(function(){
         $('#disabilitiesRadio :radio').prop('checked', false);
     });
          });

【问题讨论】:

  • 复选框可以勾选多少个复选框?
  • 你能告诉我们你到目前为止有什么吗,也许是Fiddle
  • 我写了一个javascript,当单选按钮被选中时,它会取消选中所有复选框。
  • @user2074252 jQuery 好吗?

标签: javascript html


【解决方案1】:

我希望这就是您想要的:

HTML:

<div id="a">
  <input type="radio" name="sex" value="male">Male<br>
  <input type="radio" name="sex" value="female">Female
</div>

<div id="b">
  <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car">I have a car 
</div>

JS:

$('input[type="radio"]').change(function() {
    if ($(this).is(':checked')){ //radio is now checked
        $('input[type="checkbox"]').prop('checked', false); //unchecks all checkboxes
    }
});

$('input[type="checkbox"]').change(function() {
    if ($(this).is(':checked')){
        $('input[type="radio"]').prop('checked', false);
    }
});

小提琴:

http://jsfiddle.net/24kg2/

【讨论】:

  • 我在这个问题上没有看到 jQuery 标签。
  • 我有这个答案,但是当我在 jsp 中包含这个 JQuery 函数时,该函数不会被触发。我已经包含了必要的 Jquery 文件,但它仍然没有触发。
  • @user2074252 你需要添加$( document ).ready(function() { /*code here */ }); 把上面的代码为/*code here */
  • @j08681 $(document).ready(function(){ $('#disabilitiesRadio :radio').click(function(){ $('#disabilitiesCheckbox :checkbox').prop('选中', false); }); $('#disabilitiesCheckbox :checkbox').click(function(){ $('#disabilitiesRadio :radio').prop('checked', false); }); });
  • @j08681 如何在jsp文件中触发上述函数。
猜你喜欢
  • 1970-01-01
  • 2016-10-18
  • 2020-04-05
  • 2016-08-23
  • 2017-09-28
  • 2020-04-29
  • 2016-05-09
  • 2014-05-23
  • 2013-06-08
相关资源
最近更新 更多