CODEWITHSUNDEEP
javascriptjquerycheckbox
katie hudson
katie hudson

Reputation: 2893

Javascript/JQuery setting value of checkbox while disabling others

I am trying to figure something out. I have several checkboxes which take the following form

<div class="checkbox">
  <input name="someName1" class="checkbox styled" id="checkbox1" onclick="document.controller.setValue('/@someName1', this.checked ? '1' : '', 'someName1');" type="checkbox" value="" />
  <label for="checkbox1"> SomeName 1 </label>
</div>

<div class="checkbox">
  <input name="someName2" class="checkbox styled" id="checkbox2" onclick="document.controller.setValue('/@someName2', this.checked ? '1' : '', 'someName2');" type="checkbox" value="" />
  <label for="checkbox2"> SomeName 2 </label>
</div>

The controller is needed to set the value in some system that I am using. Now the above seems to work, if I check both, they are both recorded in my system. If I check one and then uncheck it, it is not recorded.

The problem comes because I only want them to be able to select one option (I know radio buttons are for this, but I need to use checkboxes).

So I have the following

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

And that makes sures that only one is selected. However, because of the onclick event, if I check a checkbox and the check a different checkbox (then the above code turns the initial one off), both checkboxes are being recorded as being checked in my system.

Therefore, I think I need to do something with my onclick event, to turn it off somehow if the checkbox is no longer checked.

I was thinking about doing something like the following

$('.checkbox').change(function() {
    if($(this).is(":checked")) {
        $value = $(this).attr("name");
       document.controller.setValue('/@'+$value, this.checked ? '1' : '', 'checkbox');
    }   
});

So if the checkbox is checked, apply the setValue function to the checkbox who's name attribute has selected it. If it is unchecked, I need to somehow reverse this.

How would I go about doing something like that?

Thanks

Upvotes: 0

Views: 749

Answers (2)

Erkan Demirel
Erkan Demirel

Reputation: 4382

You can change this

   $('.checkbox').change(function() {
        if($(this).is(":checked")) {
            $value = $(this).attr("name");
           document.controller.setValue('/@'+$value, this.checked ? '1' : '', 'checkbox');
        }   
    });

to this

    $('.checkbox').change(function() {
      $(".checkbox:checkbox:not(:checked)").each(function( index ) {
        $value = $(this).attr("name");
        document.controller.setValue('/@'+$value,'', 'checkbox');
      });
      if($(this).is(":checked")) {
        $value = $(this).attr("name");
        document.controller.setValue('/@'+$value, this.checked ? '1' : '', 'checkbox');
      }   
    });

Before you setvalue for checked item, you will reset all unchecked ones.

Upvotes: 1

Emmanuel Delay
Emmanuel Delay

Reputation: 3679

I think this is what you require

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {

  checkbox2radio('.checkbox');
  checkbox2radio('.hamlet');

  function checkbox2radio(selector) {
    $(selector).on('change', function(e) {
      var checked = this.checked;
      var index = $(selector).index(this);
      if (checked) {
        $(selector).each(function(i) {
          if(i == index) {
          }
          else {
            $(selector).eq(i).removeAttr('checked');
          }
        });
      }
    });
  }

})
</script>
<input type="checkbox" class="checkbox"> Foo<br>
<input type="checkbox" class="checkbox"> Bar<br>
<input type="checkbox" class="checkbox"> Hello<br>
<input type="checkbox" class="checkbox"> World<br>
<hr>
<input type="checkbox" class="hamlet"> to<br>
<input type="checkbox" class="hamlet"> be<br>
<input type="checkbox" class="hamlet"> or<br>
<input type="checkbox" class="hamlet"> not<br>
<input type="checkbox" class="hamlet"> to<br>
<input type="checkbox" class="hamlet"> be<br>

Upvotes: 1

Related Questions