当选中复选框时，未选中单选按钮；当复选框未选中时，使用jquery选中了单选按钮

Question

我有一个表单，其中包含一个复选框和一个单选按钮。 我正在这样做，当复选框被选中然后未选中单选按钮时，当复选框未被选中然后使用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>

问题在于，如果未选中复选框，则不会选中单选。 我就是这样

<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>

Answer 1

您需要更改：

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

至：

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

运行示例：

 $(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> 

Answer 2

您可以使用类似此jquery代码的内容。 对于Generic，我为复选框和单选使用了相同的类。 对于这种情况，我使用了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);
    }
});

并且在您的HTML中，您可能需要将此value="<?php echo date("Ym");?>"更改为value="<?php echo date('Y-m');?>"

工作示例https://jsfiddle.net/Lbj5mhr8/2/

Answer 3

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>