javascript - Uncheck a checkbox when another is checked - Stack Overflow

admin管理员组

文章数量:1290976

function uncheck() {
  var notTest = document.getElementById("choice_31_3_2");
  var Test = document.getElementById("choice_31_3_1");

  if (notTest.checked) {
    Test.checked = false;
  }
  if (Test.checked) {
    notTest.checked = false;
  }
}

jQuery("#choice_31_3_1").click(uncheck);
jQuery("#choice_31_3_2").click(uncheck);

<script src=".1.1/jquery.min.js"></script>    

<input name="input_3.1" value="Test" id="choice_31_3_1" type="checkbox">
<label for="choice_31_3_1" id="label_31_3_1">Test</label>
<input name="input_3.2" value="notTest" id="choice_31_3_2" type="checkbox">
<label for="choice_31_3_2" id="label_31_3_2">notTest</label>

I wrote a function to uncheck a checkbox if another one is checked, I am using jQuery to call uncheck() on those specific input.

I am getting the result I want. When I check test then check notTest, Test is being unchecked. BUT when I am pressing Test again, the test checkbox is refusing to check unless I manually uncheck notTest.

I included the code snippet , please can figure out what is wrong ?

The code is running normally on Wordpress but unfortunately not here.

function uncheck() {
  var notTest = document.getElementById("choice_31_3_2");
  var Test = document.getElementById("choice_31_3_1");

  if (notTest.checked) {
    Test.checked = false;
  }
  if (Test.checked) {
    notTest.checked = false;
  }
}

jQuery("#choice_31_3_1").click(uncheck);
jQuery("#choice_31_3_2").click(uncheck);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>    

<input name="input_3.1" value="Test" id="choice_31_3_1" type="checkbox">
<label for="choice_31_3_1" id="label_31_3_1">Test</label>
<input name="input_3.2" value="notTest" id="choice_31_3_2" type="checkbox">
<label for="choice_31_3_2" id="label_31_3_2">notTest</label>

I wrote a function to uncheck a checkbox if another one is checked, I am using jQuery to call uncheck() on those specific input.

I am getting the result I want. When I check test then check notTest, Test is being unchecked. BUT when I am pressing Test again, the test checkbox is refusing to check unless I manually uncheck notTest.

I included the code snippet , please can figure out what is wrong ?

The code is running normally on Wordpress but unfortunately not here.

• javascript
• jquery
• wordpress
• checkbox

Share Improve this question Follow edited Nov 3, 2017 at 14:01 Shiladitya 12.2k1717 gold badges2828 silver badges4242 bronze badges asked Nov 3, 2017 at 5:25 YMA981YMA981 12122 silver badges1212 bronze badges 4

• "message": "SyntaxError: expected expression, got '<'", - your code snippet is not executable, don't make it a code snippet - or remove the HTML in the javascript panel – Jaromanda X Commented Nov 3, 2017 at 5:26
• Do you know why this SyntaxError came up, Advice taken, snippet removed – YMA981 Commented Nov 3, 2017 at 5:58
• because you put <script> in the javascript box – Jaromanda X Commented Nov 3, 2017 at 6:00
• ok, thank you next time i won't when i am using online js editors – YMA981 Commented Nov 3, 2017 at 6:07

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

Here you go with a solution

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="input_3.1" value="Test" id="choice_31_3_1" type="checkbox">
<label for="choice_31_3_1" id="label_31_3_1">Test</label>
<input name="input_3.2" value="notTest" id="choice_31_3_2" type="checkbox">
<label for="choice_31_3_2" id="label_31_3_2">notTest</label>

Hope this will help you.

You can code like this,

 HTML:- 
 <input type="checkbox" class="example" />
 <input type="checkbox" class="example" />
 <input type="checkbox" class="example" />
 <input type="checkbox" class="example" />
 JQUERY:- 
 $('input.example').on('change', function() {
     $('input.example').not(this).prop('checked', false);  
 });

Working Demo url

Hope this will help you.

BUT when i am pressing Test again, the test checkbox is refusing to chech unless i manually uncheck notTest.

It is because when you press again, you didn't check which checkbox you have clicked on. You simply unchecked a checked-checkbox.

Try this simple approach

var allIds = [ "choice_31_3_1", "choice_31_3_2" ];
function uncheck( event ) 
{
   var id = event.target.id;
   allIds.forEach( function( id ){
      if ( id != event.target.id )
      {
         document.getElementById( id ).checked = false;
      }
   });
}

jQuery("#choice_31_3_1").click(uncheck);
jQuery("#choice_31_3_2").click(uncheck);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input name="input_3.1" value="Test" id="choice_31_3_1" type="checkbox">
<label for="choice_31_3_1" id="label_31_3_1">Test</label>
<input name="input_3.2" value="notTest" id="choice_31_3_2" type="checkbox">
<label for="choice_31_3_2" id="label_31_3_2">notTest</label>

Try this.

$('input.test').on('change', function() {
    $('input.test').not(this).prop('checked', false);  
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name="input_3.1" value="Test" id="choice_31_3_1" type="checkbox" class="test">
<label for="choice_31_3_1" id="label_31_3_1">Test</label>
<input name="input_3.2" value="notTest" id="choice_31_3_2" type="checkbox" class="test">
<label for="choice_31_3_2" id="label_31_3_2">notTest</label>

Using JS: Change your function to this:

$(function(){
 function uncheck(e) {
    var isElemChecked = e.target.checked;

    // Return if the element was being unchecked
    if(!isElemChecked){
      return;
    }

    $('input').prop('checked',!isElemChecked);
    $(e.target).prop('checked',isElemChecked);
  }

jQuery("#choice_31_3_1").click(uncheck);
jQuery("#choice_31_3_2").click(uncheck);
})

Using CSS (no need for JS code): Change your inputs to type=radio and update the css as

input[type="radio"] {
  -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
  -moz-appearance: checkbox;    /* Firefox */
}

<input name="input_3" value="Test" id="choice_31_3_1" type="radio">
<label for="choice_31_3_1" id="label_31_3_1">Test</label>
<input name="input_3" value="notTest" id="choice_31_3_2" type="radio">
<label for="choice_31_3_2" id="label_31_3_2">notTest</label>

Please note CSS approach would not work on IE.

https://plnkr.co/edit/o7dft84Cm4tA3GUOLt4y?p=preview

 function uncheck() {
    if (this.checked){ // support unchecking
     $('input').prop('checked',false);
     this.checked = true
    }
  }

You have to know which element triggered the event in order to solve it properly.

One way to solve it is the function I show above - simply mark all checkboxes to false, then mark this - the element that triggered the event - to true.

本文标签： javascriptUncheck a checkbox when another is checkedStack Overflow