TableView with multiple section and with radio button and checkbox button

Question

This I what I trying to achieve:

There is no problem in populating all the datas, but the problem is how to let user to choose only one row for radio section and allow more than one row for checkbox section, I am stuck in this part. Here is the code for now:

@objc func checkboxSelected(_ sender: UIButton) {

    sender.isSelected = !sender.isSelected

    if(sender.isSelected == true)
    {
        sender.setImage(UIImage(named: "red_checkbox"), for: UIControlState.normal)

    }
    else
    {
        sender.setImage(UIImage(named: "checkbox2"), for: UIControlState.normal)
    }

}

@objc func radioBtnSelected(_ sender: UIButton) {

    sender.isSelected = !sender.isSelected

    if(sender.isSelected == true)
    {
        sender.setImage(UIImage(named: "radio_red"), for: UIControlState.normal)

    }
    else
    {
        sender.setImage(UIImage(named: "radio_white"), for: UIControlState.normal)
    }

}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "DishTableViewCell", for: indexPath) as! DishTableViewCell
    cell.titleLbl.text = self.menu[indexPath.section].menuOptions[indexPath.row].name


    if self.menu[indexPath.section]. menuOptions[0].title == "checkbox" {

        cell.checkboxBtn.isHidden = false
        cell.radioBtn.isHidden = true
    }else if

        self.menu[indexPath.section]. menuOptions[0].title == "radio" {

        cell.checkboxBtn.isHidden = true
        cell.radioBtn.isHidden = false


    }

    cell.checkboxBtn.addTarget(self, action: #selector(DishViewController.checkboxSelected(_:)), for: UIControlEvents.touchUpInside)
    cell.radioBtn.tag = self.menu[indexPath.section]. menuOptions[indexPath.row].id
    cell.radioBtn.addTarget(self, action: #selector(DishViewController.radioBtnSelected(_:)), for: UIControlEvents.touchUpInside)

    return cell
}

Or is there any other way to do other than using tableview? Please assist. Thank you

@Shezad how to use it? Because there will be more than one section meaning infinite sections with multi row inside. — minimomo, Jan 10 '18 at 09:12
@mimi93 even if there are multiple sections you are having only two types of selection right? (check box or radio button). use an array of indexpath to keep track of selected indexpath. — Shezad, Jan 10 '18 at 09:15

Shezad · Answer 1 · 2018-01-11T09:16:04.760

I would suggest you to use UIImageView instead of button and use tableView didSelectRowAt method.

I have edited your code and made some changes below:

1.Declare two variables for keeping track of indexpath

var radioButtonIndexPath = [Int:IndexPath]() //for radiobutton
var checkboxIndexPath = [indexPath]() //for checkbox

2.cellForRowAt method has modified with an UIImageView instead of UIButton

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

let cell = tableView.dequeueReusableCell(withIdentifier: "DishTableViewCell", for: indexPath) as! DishTableViewCell
cell.titleLbl.text = self.menu[indexPath.section].menuOptions[indexPath.row].name

if self.menu[indexPath.section]. menuOptions[0].title == "checkbox" {
    cell.checkbox.isHidden = false
    cell.radio.isHidden = true
    if checkboxIndexPath.contains(IndexPath) {
        checkbox.image = UIImage(named:"red_checkbox")
    }else{
        checkbox.image = UIImage(named:"checkbox2")
    }
}else if

    self.menu[indexPath.section]. menuOptions[0].title == "radio" {
    cell.checkbox.isHidden = true
    cell.radio.isHidden = false

    if radioButtonIndexPath.keys.contains(indexPath.section) {
        if radioButtonIndexPath[indexPath.section] == indexPath {
            radio.image = UIImage(named:"radio_red")
        }else{
            radio.image = UIImage(named:"radio_white")
        }
    }else{
        radio.image = UIImage(named:"radio_white")
   }

}

return cell
}

3.didSelectRowAt method:

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

    if self.menu[indexPath.section].menuOptions[0].title == "checkbox" {

     if checkboxIndexPath.contains(IndexPath) {
            checkboxIndexPath.remove(at: checkboxIndexPath.index(of: IndexPath)) 
        }else{
            checkboxIndexPath.append(IndexPath)
        }

    }else if self.menu[indexPath.section].menuOptions[0].title == "radio" {

        radioButtonIndexPath[indexPath.section] = indexPath

    }

    yourtableView.reloadData() // reload your tableview here 
}

try this code and let me know if there any issue.

It works, but if I got More than one section for radio section it won't allow me to select other's section's row, it only allow me to select one radio button among all the section inside(for radio section). — minimomo, Jan 11 '18 at 01:33
@mimi93 i have edited the code please check it and let me know if any issues. — Shezad, Jan 11 '18 at 05:19
@mimi93 i have changed radioButtonIndexPath to an dictionary so there is change in all three sections of the answer so just check it — Shezad, Jan 11 '18 at 05:20
when unselect all checkbox it crashes at the line "checkboxIndexPath.remove(at: IndexPath)". Is it because of the same reason as the radio section? Because there will be more than one section for checkbox section too. — minimomo, Jan 11 '18 at 08:40
I just uploaded a new screenshot of the error, pls see the above image. It happen when I trying to unselect the checkbox and it crashes — minimomo, Jan 11 '18 at 08:57
replace that line with checkboxIndexPath.remove(at: checkboxIndexPath.index(of: IndexPath)) — Shezad, Jan 11 '18 at 09:15
@mimi93 in your screenshot i can see that you are using indexPath.row don't use that in remove line please check the above code . i have updated that line. — Shezad, Jan 11 '18 at 09:17

TableView with multiple section and with radio button and checkbox button

1 Answers1