2

How do I un check a radio button within the input box. I've been trying to uncheck this radio button with javascript but I can't seem to be able to do it when its inside an array

this is the code that I want to un check with javascript

<?php
    for($i = 0; $i < 3; $i ++){
        $num = rand(0,2);
        for($j = 0; $j < 3; $j++){
            if($num){
                $check = 'checked';
            }else
                $check='';
            echo '<input name="acc['.$i.']" type="radio" '.$check.'>';
        }
        echo '<br/>';

    }
?>

I've tried with this javascript but I don't know how to point to the actual radio button to uncheck

$(':radio').mousedown(function(e){
    var $self = $(this);
    if( $self.is(':checked') ){
        var uncheck = function(){
            setTimeout(function(){
                $self.removeAttr('checked');
            },0);
        };
        var unbind = function(){
            $self.unbind('mouseup',up);
        };
        var up = function(){
            uncheck();
            unbind();
        };
        $self.bind('mouseup',up);
        $self.one('mouseout', unbind);
    }
});
learningbyexample
  • 1,527
  • 2
  • 21
  • 42
  • In the JavaScript code you're checking on mousedown and unchecking on mouseup again which didn't make sense. Is that what you're looking for? – Akshay Khandelwal Aug 27 '16 at 17:16
  • 1: Why uncheck a radio when clicked? That is what a checkbox is for. 2: `$("input[name= echo acc['.$i.'] ?>]").prop("checked",false);` – mplungjan Aug 27 '16 at 17:17
  • [Related (and by a stretch of the imagination, a duplicate)](http://stackoverflow.com/questions/426258/setting-checked-for-a-checkbox-with-jquery) –  Aug 27 '16 at 17:22
  • @mplungjan I want to be able to uncheck because if the user does not want to check any radio button in that row, once the user presses it, it can't be changed – learningbyexample Aug 27 '16 at 17:26
  • Checkbox is what is used for that – mplungjan Aug 27 '16 at 17:44
  • but the check box allows more than one to be checked and that is something that I should not allow – learningbyexample Aug 27 '16 at 17:52
  • @learningbyexample no? Than why you need to uncheck the radio button? I mean would be helpful to explain the circumstance. – Roko C. Buljan Aug 27 '16 at 17:55
  • @RokoC.Buljan A user can choose from the first row either column position 0, 1 or 2. or he can choose to leave it blank and only chose from the second and third row and choose only one column in that row. If the user decides to not want to leave a radio button activated because maybe he decided that row '1' was read wrong or for some reason the user made a mistake and meant to select in row '0' he should be able to unselect the radio button and select another one BUT ONLY ONE PER ROW – learningbyexample Aug 27 '16 at 18:02
  • how do I do this? – learningbyexample Aug 27 '16 at 18:41
  • @learningbyexample ignore my last comment. Made an example with Radios. – Roko C. Buljan Aug 27 '16 at 19:05
  • [Also related and by a smaller stretch of the imagination, a duplicate](http://stackoverflow.com/questions/6191621/jquery-check-uncheck-radio-button-onclick) –  Aug 28 '16 at 05:47

1 Answers1

1

So you have some rows, each row has 3 radios.

  • One radio can be togglable
  • If a user selects a radio in one row, all radios from other rows should become "unchecked":

var $radios = $(":radio");

$radios.on("mouseup", function(e) {

  var name  = $(this).prop("name");

  // Make togglable
  if(this.checked){
    setTimeout($.proxy(function() {
      this.checked = false;
    }, this),0);
  }
  
  // Unselect radios of other rows
  $radios.not( $("[name='"+ name +"']") ).prop("checked", false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>A
<input type="radio" name="acc[0]">
<input type="radio" name="acc[0]">
<input type="radio" name="acc[0]">

<br>B
<input type="radio" name="acc[1]">
<input type="radio" name="acc[1]">
<input type="radio" name="acc[1]">

<br>C
<input type="radio" name="acc[2]">
<input type="radio" name="acc[2]">
<input type="radio" name="acc[2]">

(Note that your PHP currently makes checked all three radios inside a row! use Inspect Element to see that issue. You should fix this; but I have no clue why you use random 0,1,2... anyways so I'm unable to help you here)

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • It does not un check when it is inside the array of the nested for. – learningbyexample Aug 27 '16 at 19:11
  • @learningbyexample that's cause you have three checked radios inside a single ROW (your PHP is messed up) - Use inspect element and see for your self. (BTW I have no clue why you use that random thing. As you can see when you'll have a valid HTML the script should work) – Roko C. Buljan Aug 27 '16 at 19:19
  • I just had to randomly check one radio button so $num rand() is not important. Only one radio button can be checked per row – learningbyexample Aug 27 '16 at 19:30