Check/Uncheck using jQuery not working

Question

I am trying to make the check boxes behave like radio buttons in my ASP .NET MVC Web Application. I have got about 20-30 check boxes grouped in two. For Example:

<input type="checkbox" id="@riggingType.RiggingTypeId 1" name="RiggingTypePlus" 
       value="@riggingType.RiggingTypeId" 
       checked="@riggingTypeIds.Contains(riggingType.RiggingTypeId)" />

<input type="checkbox" id="@riggingType.RiggingTypeId 2" name="RiggingTypeMinus" 
       value="@riggingType.RiggingTypeId" 
       checked="@riggingTypeIds.Contains(riggingType.RiggingTypeId)" />

Goal:

I want to make the check boxes to behave in such a way that if a Plus Check box is checked then the Minus is unchecked automatically and vice versa. I have written following code to try and achieve this functionality:

$(":checkbox").change(function () {
  var inputs = $(this).parents("form").eq(0).find(":checkbox");
  var idx = inputs.index(this);
  if (this.name.substring(this.name.length - 4, this.name.length) === "Plus") {
      // just trying to check if I am getting the right it 
      // and I am getting the right id
      // alert(inputs[idx + 1].id);

      // But this does not work
      $("#" + inputs[idx + 1].id).prop('checked', false);
  }
});

Am I doing something wrong here:

$("#" + inputs[idx + 1].id).prop('checked', false);

Any help will be appreciated.

I know that I can use the radio buttons and group them by same name but I am rendering the elements in a loop so they all have the same name but different values and I don't want to name them differently because I am using this data on the server side... Is there a better way to do this?

Answer:

Got this working using the following:

$(document).ready(function(){
    $(":checkbox").on('click', function () {

    var $this = $(this);
    var inputs = $this.closest("form").find(":checkbox");
   if ($this.attr('name').substring(this.name.length - 4, this.name.length) === "Plus" && $this.attr('checked')) {
        $this.next().prop('checked', false);
    }
        else
        {
            $this.prev().prop('checked', false);
        }
  });
});

Fiddle Link

If u make fiddle - i solve ur trouble (it is wrong - have any tags with same id - try to create differents ids — Legendary
– Legendary, Commented Apr 1, 2015 at 13:15
Both checkboxes have the same id. The the last checkbox will likely always be deselected. Ids should always be unique. — KJ Price
– KJ Price, Commented Apr 1, 2015 at 13:18
Try inputs[idx + 1].prop("id") instead of inputs[idx + 1].id — Sukanya1991
– Sukanya1991, Commented Apr 1, 2015 at 13:19
I suspect the problem is the id selectors. Is there a reason you can't simply use the HTMLElement as a selector? $(inputs[idx+1]).prop... — blgt
– blgt, Commented Apr 1, 2015 at 13:19

Legendary · Accepted Answer · 2015-04-01 13:25:23Z

1

fiddle: https://jsfiddle.net/24gmnjwm/1/

$(document).ready(function(){
  $(":checkbox").on('click', function () {
    var $this = $(this);
    var inputs = $this.closest("form").find(":checkbox");
    if ($this.attr('name').substring(this.name.length - 4, this.name.length) === "Plus") {
        $this.next().prop('checked', false);
    }
  });
});

edited Apr 1, 2015 at 13:25

answered Apr 1, 2015 at 13:16

Legendary

2,24219 silver badges26 bronze badges

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

5 Comments

blgt Over a year ago

inputs[idx + 1] is an HTMLElement, not a jQuery object. This will return a function not defined error

Syed Farjad Zia Zaidi Over a year ago

I have tried this and I get the error id not defined

Sukanya1991 Over a year ago

Try inputs[idx + 1].prop("id") instead of inputs[idx + 1].id. Already commented this on your question.

Legendary Over a year ago

@SyedFarjadZiaZaidi edited, it works now, but not nice to view, if i right understand ur problem - i re-write to more readable and for minus too

Syed Farjad Zia Zaidi Over a year ago

Thanks man I got it working here is the updated fiddle: jsfiddle.net/24gmnjwm/2

James · Accepted Answer · 2015-04-01 14:13:50Z

0

If we can assume that the "plus" checkbox always appears immediately before its related "minus" checkbox then this will do the trick:

$(":checkbox").change(function () {
    if ($(this).prop("name").match(/Plus$/)) {
        $(this).next().prop("checked", !$(this).prop("checked"));
    } else {
        $(this).prev().prop("checked", !$(this).prop("checked"));
    }
});

sample form:

<form>
<input type="checkbox" name="RiggingTypePlus" value="2" checked />
<input type="checkbox" name="RiggingTypeMinus" value="2" />
<input type="checkbox" name="RiggingTypePlus" value="3" />
<input type="checkbox" name="RiggingTypeMinus" value="3" />
<input type="checkbox" name="RiggingTypePlus" value="4" />
<input type="checkbox" name="RiggingTypeMinus" value="4" />
<input type="checkbox" name="RiggingTypePlus" value="5" />
<input type="checkbox" name="RiggingTypeMinus" value="5" />
</form>

fiddle

edited Apr 1, 2015 at 14:13

answered Apr 1, 2015 at 13:43

James

22.4k5 gold badges30 silver badges44 bronze badges

3 Comments

Syed Farjad Zia Zaidi Over a year ago

But this does not work assuming that I just had to copy paste this ? I can check all the check boxes can you make a fiddle?

James Over a year ago

It certainly should work if you copy paste it, and if your form HTML is how I imagined it would be rendered (like above, ID can be there or missing doesnt matter)

James Over a year ago

I misunderstood your form. Redid answer to work with what you have.

Collectives™ on Stack Overflow

Check/Uncheck using jQuery not working

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related