1

I have a table with 2 checkboxes:

<table>
  <tr>
    <td>
      <label for="A">
        <input type="checkbox" name="A" id="A" value="true" />
        A
      </label>

      <label for="B">
        <input type="checkbox" name="B" id="B" value="true" />
        B
      </label>
    </td>
  </tr>
</table>

and I want to be able to identify which box is checked (by id), and be able to store a string as a variable, depending on the box. Here is my javascript:

  var getCheck = function() {
    if (document.getElementById('A').checked) {
      return "A";
    }

    else if (document.getElementById('B').checked){
      return "B";
    }
    else if ((document.getElementById('A').checked) && (document.getElementById('B').checked)) {
      return "Both"
    }
      console.log(getCheck); // for debugging
  };

So if I check 'A', I want getCheck to = 'A' as a string. Curious as to how to fix my Javascript to get it to work.

3 Answers 3

1

Here's an example of how you would do it with jQuery, it's just easier to do with it and since there's a jQuery tag...

Basically, you add a handler for elements that are checkboxes. Then you select only checked checkboxes with :checked and then you just access each element with the jQuery each function.

$(function(){
  $('input[type=checkbox]').on('change', function(){
    var checked = [];
    $('input[type=checkbox]:checked').each(function(index, checkbox){
      checked.push($(checkbox).attr('id'));
      });
    $('#result').text(JSON.stringify(checked, '/t'));
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <label for="A">
        <input type="checkbox" name="A" id="A" value="true" />
        A
      </label>

      <label for="B">
        <input type="checkbox" name="B" id="B" value="true" />
        B
      </label>
    </td>
  </tr>
</table>
<pre id="result"></pre>

Sign up to request clarification or add additional context in comments.

Comments

1

You need to check both first, since otherwise the function will return "A" and never reach the code that would return both. It is also possible to eliminate all the if-else complexity when returning from each if.

A helper function and some variables can reduce repetition and code length.

var isChecked = function(id){
     var e = document.getElementById(id);
     return (e && e.checked);
}
var getCheck = function() {
     var A = isChecked("A");
     var B = isChecked("B");
     if (A && B) return "Both";
     if (A) return "A";
     if (B) return "B";
     return "None";
}

For testing, you could add

window.onclick = function(){ console.log(getCheck()); }

demo via jsfiddle

Comments

0

fiddle example

The answer others provided is quite good for. And I want to make some addition:

If you want to get the value whenever user check the box, you can add a eventListen to the parent table as a delegation for the checkbox. Just as I show in the fiddle example

    <table id="mytable">
        <tr>
         <td>
          <label for="A">
           <input type="checkbox" name="A" id="A" value="true" />
            A
          </label>

          <label for="B">
           <input type="checkbox" name="B" id="B" value="true" />
            B
          </label>
        </td>
      </tr>
   </table>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.