CODEWITHSUNDEEP
javascriptforms
Fede Rossi
Fede Rossi

Reputation: 69

Javascript code to deselect specific checkboxes

I'd need a javascript code to only deselect the checkboxes named as a1 and a4 when user clicks on <option value="0" selected="true">Hide a1 + a4</option>

<form action="" method="POST">

<select class="required-entry">
  <option value="0" selected="true">Hide a1 + a4</option>
  <option value="2">WhatsApp only</option>
  <option value="1">E-mail only</option>
  <option value="3">WhatsApp + E-mail</option>
</select>

<label ><input type="checkbox" name="a1" checked="">1</label><br />
<label ><input type="checkbox" name="a2" checked="">2</label><br />
<label ><input type="checkbox" name="a3" checked="">3</label><br />
<label ><input type="checkbox" name="a4" checked="">4</label><br />
<label ><input type="checkbox" name="a5" checked="">5</label><br />

<input type="submit" />
</form>

Here is the JavaScript I use:

    $(function() {
$('.required-entry').change(function(){    // use class or use $('select')
if ($(this).val() == "0") {
            document.getElementById("id of checkbox").checked = false;
} else {
}
});
});

Upvotes: 1

Views: 272

Answers (5)

mark
mark

Reputation: 959

Here is the right code.

$(function () {
   $('.required-entry').change(function () {
      if ($(this).val() == "0") {
         $('input[name="waalertdown"]').prop('checked', false)
      }
   });
});

Upvotes: 0

h0tfus3
h0tfus3

Reputation: 592

This will work with your current HTML and jQuery.

$('.required-entry').change(function(e) {
    if (e.target.value === '0') {
        $("input[name='a1']")[0].checked = false;
        $("input[name='a4']")[0].checked = false;
    }
});

Upvotes: 0

Xm7X
Xm7X

Reputation: 861

You can try this so you do not have to add the ID's.

$(function() {
   $('.required-entry').change(function(){
      if ($(this).val() == "0") {
         document.getElementsByName("a1").checked = false;
         document.getElementsByName("a4").checked = false;
      }
   });
});

Upvotes: 0

David Martin
David Martin

Reputation: 12248

Here's a jQuery solution:

$(function () {
    $('.required-entry').change(function () {
        if ($('select option:selected').val() == 0) {
            $('input[name="a1"]').prop('checked', false)
            $('input[name="a4"]').prop('checked', false)
        }
    });
});

Upvotes: 1

SDK
SDK

Reputation: 1542

Try like below,

In html...

     <form action="" method="POST">

       <select class="required-entry">
       <option value="0" selected="true">Hide a1 + a4</option>
       <option value="2">WhatsApp only</option>
      <option value="1">E-mail only</option>
      <option value="3">WhatsApp + E-mail</option>
     </select>

     <label ><input type="checkbox" name="a1" id="a1" checked="">1</label><br />
     <label ><input type="checkbox" name="a2" id="a2" checked="">2</label><br />
     <label ><input type="checkbox" name="a3" id="a3" checked="">3</label><br />
     <label ><input type="checkbox" name="a4" id="a4" checked="">4</label><br />
     <label ><input type="checkbox" name="a5" id="a5" checked="">5</label><br />

     <input type="submit" />
     </form>

In javascript...

     $(function() {
     $('.required-entry').change(function(){    // use class or use $('select')
     if ($(this).val() == "0") {
          document.getElementById("a1").checked = false;
          document.getElementById("a4").checked = false;
    } else {
    }
    });
      });

Upvotes: 2

Related Questions