CODEWITHSUNDEEP
jquerycheckbox
Ahil Khan
Ahil Khan

Reputation: 217

when checkbox checked then radio button is unchecked and when checkbox unchecked then radio button is checked using jquery

I have a form there contains one checkbox and one radio button. I am doing that when checkbox checked then radio button is unchecked and when checkbox unchecked then radio button is checked using jquery

<form class="col s12" action="rpt_collection_summary.php" method="post" enctype="multipart/form-data" name="frm1" target="_blank">
    <input type="radio" id="test5" checked="checked" name="thismonth" value="<?php echo date("Y-m");?>"/>
    <input type="checkbox" id="chk_date" name="chk_date" value="1" /><label for="chk_date">Select Date </label>
</form>

Issue is that when checkbox is unchecked then radio is not checked. I am doing like this way

<script>
$(document).ready( function() {
$('#chk_date').click( function() {
    var value = $('#chk_date').val();
    if(value != '') {
        $('[name="frm1"] input:radio').removeAttr('checked');
    } else {
        $('#test5').Attr('checked');
    }

});
});
</script>

Upvotes: 0

Views: 1039

Answers (3)

Nagendrakumar kalagara
Nagendrakumar kalagara

Reputation: 23

Can you try this way,But this is both are radio buttons

var allElems = document.getElementsByTagName('input');
for (i = 0; i < allElems.length; i++) {
  if (allElems[i].type == 'radio' && allElems[i].value == 'none') {
    allElems[i].checked = true;
  }
}
$('form :radio').attr('data-ischecked', function() {
  return this.checked;
}); 
$('form').on('click', ':radio', function() {
  var status = $(this).data('ischecked'); //get status
  status && $(this).prop("checked", false); //uncheck if checked
  $(this).data('ischecked', !status); //toggle status
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label for="none">None</label>
  <input type="radio" id="none" name="myradios" value="none" />
  <label for="unconfirmed">Unconfirmed</label>
  <input type="radio" id="unconfirmed" name="myradios" value="unconfirmed" />
</form>

Upvotes: 0

Miqdad Ali
Miqdad Ali

Reputation: 6147

You can use something like this jquery code. For Generic, I used same class for both checkbox and radio. For this case I used toggleCheck

$('.toggleCheck').click( function() {
    var value = $(this).prop('checked');
    if(value != '') {
        $('.toggleCheck').prop('checked', false);
        $(this).prop('checked', true);
    } else {
        $('.toggleCheck').prop('checked', true);
      $(this).prop('checked', false);
    }
});

And in your HTML you may need to change this value="<?php echo date("Y-m");?>" to value="<?php echo date('Y-m');?>"

Working Example https://jsfiddle.net/Lbj5mhr8/2/

Upvotes: 0

Muhammad Bilal
Muhammad Bilal

Reputation: 2134

You need to change:

$('#test5').Attr('checked');

to:

$('#test5').prop('checked',true);

Running Example:

$(document).ready( function() {
$('#chk_date').click( function() {
    if ($(this).is(":checked")){
      $('[name="frm1"] input:radio').removeAttr('checked');
    } else {
      $('#test5').prop('checked',true);
    }
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form class="col s12" action="rpt_collection_summary.php" method="post" enctype="multipart/form-data" name="frm1" target="_blank">
    <input type="radio" id="test5" checked="checked" name="thismonth" value="test"/>
    <input type="checkbox" id="chk_date" name="chk_date" value="1" /><label for="chk_date">Select Date </label>
</form>

Upvotes: 2

Related Questions