CODEWITHSUNDEEP
jquery
csharp newbie
csharp newbie

Reputation: 638

Set checkbox selected = !selected when click by associated image

Here is part of my html code:

 <div class='images'>
<img src='6.png' class='diceimg1'>
<img src='2.png' class='diceimg2'>
<img src='5.png' class='diceimg3'>
<img src='1.png' class='diceimg4'>
<img src='3.png' class='diceimg5'>
</div>
                <form method="post">                    
                    <input type="checkbox" name="cb1" class="checkbox" value="6">
                    <input type="checkbox" name="cb2" class="checkbox" value="2">
                    <input type="checkbox" name="cb3" class="checkbox" value="5">
                    <input type="checkbox" name="cb4" class="checkbox" value="1">
                    <input type="checkbox" name="cb5" class="checkbox" value="3">

    <br />                  
    <br />                                  
    </form> 
    <p class="error"></p>

I want this - when I click on some image with class begins with diceimg, jQuery function gets last symbol of its class as $id, gets checkbox with name = cb+$id, and set its selected property as !selected. what did I tried:

$("img[class^=diceimg]").click(function () {
    $id = $this.attr("class").charAt($this.attr("class").length-1);
    $("checkbox[name^='cb$id']").attr("checked") = !$("checkbox[name^='cb$id']").attr("checked");
});

But nothing happens. Previous jQuery code works fine. Is there some errors in syntax?

Upvotes: 1

Views: 945

Answers (3)

nix
nix

Reputation: 3302

Try it this way:

$("checkbox[name^='cb$id']").attr("checked",
    !$("checkbox[name^='cb$id']").attr("checked"));

The value must be on the second parameter of attr() if it is used as setter.

EDIT

$("img[class^=diceimg]").click(function () {
    $id = $(this).attr("class").charAt($(this).attr("class").length-1);
    $("checkbox[name^='cb$id']").attr("checked",
        !$("checkbox[name^='cb$id']").attr("checked"));
});

Upvotes: 1

Ja͢ck
Ja͢ck

Reputation: 173642

You should separate data from mark-up instead of working with hacks like that; for instance:

<div class="images">
  <img src="6.png" class="diceimg" data-index="1">
  <img src="2.png" class="diceimg" data-index="2">
  <img src="5.png" class="diceimg" data-index="3">
  <img src="1.png" class="diceimg" data-index="4">
  <img src="3.png" class="diceimg" data-index="5">
</div>

Instead of abusing the class attribute to hide data, it's better to introduce a data-x attribute that holds the corresponding checkbox index. Doing this makes the click handler so much simpler:

$('.images').on('click', '.diceimg', function() {
    var index = $(this).data('index'),
    cb = document.getElementById('cb' + index);

    $('.checkbox')
      .prop('checked', false)
    cb.checked = true;
});

I'm using getElementById() because it's faster to resolve than by using querySelectorAll(). You would need to make this change in the form itself:

<form method="post">                    
  <input type="checkbox" name="cb1" id="cb1" class="checkbox" value="6">
  <input type="checkbox" name="cb2" id="cb2" class="checkbox" value="2">
  <input type="checkbox" name="cb3" id="cb3" class="checkbox" value="5">
  <input type="checkbox" name="cb4" id="cb4" class="checkbox" value="1">
  <input type="checkbox" name="cb5" id="cb5" class="checkbox" value="3">
</form>

Demo

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388406

Try

$("img[class^=diceimg]").click(function () {
    $id = $(this).attr("class").charAt($(this).attr("class").length-1);
    $("input[value='" + $id + "']").prop("checked", true)
});

Demo: Fiddle

With the given html, I may write is as

$("img[class^=diceimg]").click(function () {
    var $this = $(this), index = $this.index();
    $(".checkbox").eq(index).prop("checked", true)
});

Demo: Fiddle

But if you want to allow only one checkbox to be selected

$("img[class^=diceimg]").click(function () {
    var $this = $(this), index = $this.index();
    $(".checkbox").prop('checked', false).eq(index).prop("checked", true)
});

Demo: Fiddle

Upvotes: 1

Related Questions